nvd3

chart visualization

nvd3는 d3.js를 기반으로 한 재사용 가능한 차트 라이브러리입니다. 이 라이브러리는 간단하면서도 강력한 차트 인터페이스를 제공하여 데이터 시각화 작업을 용이하게 합니다.

Latest Ver 1.8.6

Homepage

Github

7,227

📢 d3.js 기반의 간편하고 강력한 차트 라이브러리

CDN 다운로드

License: Apache-2.0

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.js

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.css

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.js.map

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css.map

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js.map

Sample Code

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요.

📄 HTML
<svg style="width:800px;height:600px;"></svg><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script><script>var data = [{ values: [{x: 1, y: 10}, {x: 2, y: 20}, {x: 3, y: 30}], key: 'Sample Data' }]; nv.addGraph(function() { var chart = nv.models.lineChart(); chart.xAxis.axisLabel('Time').tickFormat(d3.format(',r')); chart.yAxis.axisLabel('Value').tickFormat(d3.format('.02f')); d3.select('svg').datum(data).call(chart); return chart; });</script>

🎨 External CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css" rel="stylesheet">

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>

⚙️ JavaScript
var data = [{ values: [{x: 1, y: 10}, {x: 2, y: 20}, {x: 3, y: 30}], key: 'Sample Data' }]; nv.addGraph(function() { var chart = nv.models.lineChart(); chart.xAxis.axisLabel('Time').tickFormat(d3.format(',r')); chart.yAxis.axisLabel('Value').tickFormat(d3.format('.02f')); d3.select('svg').datum(data).call(chart); return chart; });