D3.js 教程 - 中文版

D3.js 是一个强大的 JavaScript 库，用于创建交互式数据可视化。本教程将引导你了解 D3.js 的基础知识，并帮助你开始自己的数据可视化之旅。

基础概念

• 数据绑定：将数据与 DOM 元素关联起来。
• 比例尺：将数据值映射到视觉值。
• 路径生成：使用 D3 创建几何形状和路径。

快速开始

1. 安装 D3.js：可以通过 CDN 引入 D3.js。

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

2. 选择元素：使用 D3 选择 DOM 元素。

   d3.select("body");
   

3. 数据绑定：将数据绑定到元素。

   d3.select("body").data([5, 10, 15, 20]);
   

4. 创建图形：使用 D3 创建图形和动画。

   d3.select("body").selectAll("circle").data([5, 10, 15, 20]).enter().append("circle").attr("cx", function(d) { return d * 50; }).attr("cy", function(d) { return d * 50; }).attr("r", 10);
   

进阶教程

• D3.js 官方文档

示例图片