哪里能找到详细的D3 API中文手册？

D3 API 中文手册
D3.js（Data-Driven Documents）是用于数据可视化的强大 JavaScript 库，通过操作 DOM 和 SVG，开发者可以创建动态、交互式的数据图表，本文提供一份D3 API 中文手册，覆盖核心功能与常用方法，帮助开发者快速上手并高效使用 D3.js。

核心模块与 API 分类

D3 的 API 按功能划分为多个模块,以下是主要分类：

选择集（Selections）

用于操作 DOM 元素的模块，类似 jQuery 的选择器。

• d3.select()：选取单个元素。
• d3.selectAll()：选取多个元素。
• .attr() / .style()：设置属性或样式。
• .data()：绑定数据到元素。
• .enter() / .exit()：处理数据与元素的匹配关系。

示例：动态创建柱状图

d3.select("svg")
  .selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", (d, i) => i * 30)
  .attr("y", d => 100 - d * 5)
  .attr("width", 25)
  .attr("height", d => d * 5);

比例尺（Scales）

将数据映射到视觉属性（如位置、颜色）。

• 线性比例尺：d3.scaleLinear().domain([min, max]).range([start, end])
• 序数比例尺：d3.scaleOrdinal().domain(data).range(categories)
• 时间比例尺：d3.scaleTime()

示例：颜色映射

const colorScale = d3.scaleOrdinal()
  .domain(["A", "B", "C"])
  .range(["#FF6B6B", "#4ECDC4", "#45B7D1"]);

坐标轴（Axes）

快速生成图表坐标轴。

• d3.axisTop() / d3.axisBottom()：上下方向轴。
• d3.axisLeft() / d3.axisRight()：左右方向轴。
• .ticks()：设置刻度数量。

示例：添加 X 轴

const xAxis = d3.axisBottom(xScale).ticks(5);
d3.select("svg")
  .append("g")
  .attr("transform", "translate(0, 200)")
  .call(xAxis);

过渡与动画（Transitions）

实现平滑的动态效果。

• .transition()：启动过渡。
• .duration()：设置持续时间（毫秒）。
• .ease()：指定缓动函数。

示例：柱状图高度过渡

d3.selectAll("rect")
  .transition()
  .duration(1000)
  .attr("y", d => 100 - d * 5);

进阶功能

力导向图（Force Simulation）

用于绘制关系网络图。

• d3.forceSimulation()：创建力模拟器。
• .force("link", d3.forceLink())：定义节点间的链接力。
• .force("charge", d3.forceManyBody())：节点间的排斥力。

路径生成器（Path Generators）

生成 SVG 路径字符串，用于绘制折线图、面积图等。

• d3.line()：折线图路径。
• d3.area()：面积图路径。
• d3.arc()：扇形路径（适用于饼图）。

最佳实践与性能优化

1. 减少 DOM 操作：批量更新元素而非逐条修改。
2. 使用数据绑定：通过 data().join() 简化元素更新逻辑。
3. 启用硬件加速：对复杂动画使用 CSS transform。

常见问题解答

Q：D3 如何兼容不同屏幕分辨率？
使用 viewBox 属性配合百分比布局，确保 SVG 自适应缩放。

Q：如何处理大数据集的渲染卡顿？

• 采用虚拟滚动（Virtual Scrolling）。
• 通过 <canvas> 替代 SVG 渲染。

资源与学习路径

• 官方文档：d3js.org（英文）
• 社区教程：Observable 平台
• 中文教程：国内技术博客与 GitHub 开源项目（见引用列表）。

引用说明 参考以下资源：

1. D3.js 官方文档（MIT License）
2. MDN Web 文档（Mozilla Public License）
3. 《精通 D3.js》（电子工业出版社）