D3.js（Data-Driven Documents）是一款基于JavaScript的数据可视化库，能帮助开发者通过动态交互方式呈现数据。适合想要用网页技术制作图表、地图、动态可视化等的初学者和进阶者。

📚 核心概念速览

  • 数据绑定：将数据与HTML元素关联，实现动态更新

    D3JS 数据绑定示意图

  • DOM操作：通过JavaScript操作网页元素，构建可视化结构

    DOM 操作示意图

  • 动画与过渡：用transition()实现平滑的动态效果

    动画过渡示例

🛠️ 实战步骤：创建第一个图表

  1. 引入库
    在HTML中添加D3.js脚本： 

    <script src="https://d3js.org/d3.v7.min.js"></script>

  2. 准备数据
    示例数据： 

    const data = [10, 20, 30, 40, 50];

  3. 生成SVG画布 

    const svg = d3.select("body")
    .append("svg")
    .attr("width", 300)
    .attr("height", 100);

  4. 绘制条形图
    使用rect元素渲染数据： 

    svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("width", d => d * 2)
    .attr("height", 20)
    .attr("x", (d, i) => i * 30)
    .attr("y", 30)
    .attr("fill", "steelblue");

📖 推荐学习路径

💡 小技巧

  • 使用d3.scaleLinear()进行数据映射
  • 通过d3.axis()快速生成坐标轴
  • 图表样式可参考SVG图标库（图片关键词：SVG_Icon_Library）
数据可视化示例