什么是 D3.jsD3.jsData-Driven Documents是一个基于 JavaScript 的数据可视化库用于创建动态、交互式的数据可视化图表。它通过绑定数据到 DOM文档对象模型并利用 HTML、SVG 和 CSS 实现数据驱动的图形渲染。D3.js 的核心功能包括数据绑定、DOM 操作、动画过渡和事件处理。核心特性数据驱动将数据绑定到 DOM 元素实现数据与图形的动态关联。强大的可视化能力支持多种图表类型如折线图、柱状图、散点图、力导向图等。交互性支持鼠标悬停、点击、缩放等交互行为。可扩展性提供丰富的 API 和插件生态便于定制化开发。安装与引入通过 CDN 引入scriptsrchttps://d3js.org/d3.v7.min.js/script通过 npm 安装npminstalld3然后在项目中引入import*asd3fromd3;基础示例创建柱状图以下是一个简单的柱状图实现示例!DOCTYPEhtmlhtmlheadtitleD3.js Bar Chart/titlescriptsrchttps://d3js.org/d3.v7.min.js/script/headbodysvgwidth400height300/svgscriptconstdata[10,20,30,40,50];constsvgd3.select(svg);constbarHeight30;svg.selectAll(rect).data(data).enter().append(rect).attr(x,10).attr(y,(d,i)i*(barHeight5)).attr(width,dd*5).attr(height,barHeight).attr(fill,steelblue);/script/body/html常用 API选择器d3.select()选择单个元素。d3.selectAll()选择多个元素。数据绑定.data()绑定数据到 DOM 元素。.enter()处理新增数据。.exit()处理删除数据。比例尺Scalesd3.scaleLinear()线性比例尺。d3.scaleBand()序数比例尺用于柱状图。坐标轴d3.axisBottom()创建底部坐标轴。d3.axisLeft()创建左侧坐标轴。进阶功能过渡动画d3.select(rect).transition().duration(1000).attr(width,100);事件处理d3.select(rect).on(click,function(){alert(Clicked!);});学习资源官方文档D3.js 教程Observable《D3.js in Action》书籍D3.js 适合需要高度定制化数据可视化的场景但学习曲线较陡。对于快速开发也可以考虑封装库如 ECharts、Chart.js。