D3.js #

什么是 D3.js？ #

D3.js（Data-Driven Documents）是一个基于数据操作文档的 JavaScript 库。D3 帮助你使用 HTML、SVG 和 CSS 将数据生动地呈现出来。D3 强大的 Web 标准结合能力让你无需将自己绑定在专有框架上，同时享受现代浏览器的全部功能。

文档结构 #

本指南按以下结构组织，循序渐进地帮助你掌握 D3.js：

1. 入门基础 #

主题	描述	文档链接
D3.js 简介	D3.js 的定义、特点、历史与应用场景	intro.md
安装与配置	环境搭建、安装方式、开发工具	installation.md
选择器	选择和操作 DOM 元素的核心方法	selection.md
数据绑定	将数据绑定到 DOM 元素的核心概念	data-binding.md

2. 核心概念 #

主题	描述	文档链接
SVG 基础	SVG 元素、属性与 D3 的结合	svg.md
比例尺	将数据映射到可视空间的转换函数	scales.md
形状生成器	路径、线条、区域等形状的生成	shapes.md
坐标轴	创建和自定义坐标轴	axes.md

3. 进阶功能 #

主题	描述	文档链接
过渡动画	创建流畅的数据可视化动画	transitions.md
交互事件	处理用户交互和事件响应	interaction.md
布局算法	力导向图、树图、饼图等布局	layouts.md

4. 实战应用 #

主题	描述	文档链接
常见图表	柱状图、折线图、散点图等实现	charts.md
高级主题	性能优化、模块化、最佳实践	advanced.md

学习路径 #

入门阶段（D3 新手） #

了解 D3.js 的基本概念和优势
搭建 D3.js 开发环境
掌握选择器的使用
理解数据绑定的核心概念
创建第一个简单图表

进阶阶段（D3 熟练） #

深入学习 SVG 与 D3 的结合
掌握各种比例尺的使用
学习形状生成器
创建自定义坐标轴
实现基本的交互功能

高级阶段（D3 专家） #

掌握过渡动画的创建
学习复杂的交互设计
使用布局算法创建复杂图表
理解 D3 的模块化设计
性能优化与最佳实践

大师阶段（D3 大师） #

创建自定义可视化组件
构建可复用的图表库
处理大规模数据可视化
设计交互式数据仪表板
参与开源社区贡献

D3.js vs 其他可视化库 #

特性	D3.js	Chart.js	ECharts	Highcharts
灵活性	极高	中等	高	中等
学习曲线	陡峭	平缓	中等	平缓
自定义能力	极强	有限	强	有限
图表类型	无限	预设	丰富	丰富
动画支持	强大	基础	强	强
开源免费	✅	✅	✅	⚠️ 商业收费

快速开始 #

html

<!DOCTYPE html>
<html>
<head>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
  <div id="chart"></div>
  <script>
    const data = [30, 86, 168, 281, 303, 365];
    
    d3.select('#chart')
      .selectAll('div')
      .data(data)
      .enter()
      .append('div')
      .style('width', d => d + 'px')
      .style('background', 'steelblue')
      .style('margin', '2px')
      .style('padding', '5px')
      .text(d => d);
  </script>
</body>
</html>

核心概念预览 #

选择器 #

javascript

d3.select('body').append('svg')
  .attr('width', 500)
  .attr('height', 300);

数据绑定 #

javascript

const circles = svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx', d => xScale(d.x))
  .attr('cy', d => yScale(d.y))
  .attr('r', 5);

比例尺 #

javascript

const xScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.x)])
  .range([0, width]);

过渡动画 #

javascript

d3.selectAll('circle')
  .transition()
  .duration(1000)
  .attr('cx', d => xScale(d.x))
  .attr('cy', d => yScale(d.y));

资源推荐 #

D3.js 官方网站：最权威的 D3.js 文档
D3.js GitHub：D3.js 源码和问题反馈
Observable：D3.js 官方示例平台
D3 Gallery：D3.js 作品展示

贡献指南 #

欢迎对本指南进行贡献！如果你发现错误或有改进建议，请联系我们。

更新日志 #

2026-03-28：创建初始版本，包含完整的 D3.js 学习大纲

继续探索本指南，逐步掌握 D3.js 技术，从新手成长为数据可视化专家！