d3-viz

D3.js 数据可视化技能

技能概述

D3.js 是一个强大的 JavaScript 数据可视化库，通过将数据绑定到 DOM 元素，让开发者能够创建完全自定义的交互式图表、网络图、地理可视化等复杂可视化项目。

适用场景

1. 需要超越标准图表库的自定义可视化

当现有的图表组件无法满足你的视觉需求时，D3.js 提供对每个视觉元素的精细控制。无论是独特的视觉编码、自定义布局，还是需要精确调整每个像素的出版级图表，D3.js 都能胜任。

2. 复杂交互式探索工具

如果你的可视化需要复杂的交互行为——如平移、缩放、刷选、拖拽等，D3.js 内置的交互模块让这些功能的实现变得简单。用户可以通过缩放深入数据细节，或通过拖拽重新排列网络图的节点。

3. 跨框架的通用数据可视化

无论你使用 React、Vue、Svelte 还是原生 JavaScript，D3.js 都能无缝集成。它既可以直接操作 DOM，也可以只负责数据计算（比例尺、布局），让你的框架负责渲染，灵活适应不同的技术栈。

核心功能

1. 丰富的可视化模式

提供完整的可视化工具箱：从基础的柱状图、折线图、散点图，到高级的力导向网络图、弦图、和弦图、热力图、树状图等。每种模式都有现成的布局算法和辅助函数，大幅减少开发时间。

2. 精细的视觉控制与动画

D3.js 让你控制 SVG 的每个属性，实现精确的样式定制。内置的过渡系统支持平滑的动画效果，可以创建精心编排的视觉变化，让数据的变化过程清晰可见。

3. 灵活的集成方式

支持两种主流集成模式：直接 DOM 操作模式（适合复杂交互和动画）和声明式渲染模式（适合框架生态）。无论哪种方式，都能保持代码简洁、性能良好。

常见问题

D3.js 和其他图表库有什么区别？

D3.js 不是图表库，而是可视化工具库。像 Chart.js、ECharts 这样的库提供现成的图表类型，配置即可使用；而 D3.js 提供底层的构建模块，让你从零开始组装图表。这意味 D3.js 的学习曲线更陡，但能实现任何你能想象的可视化效果。

如何在 React 中使用 D3.js？

有两种推荐方式。方式一：在 useEffect 中直接用 D3 操作 DOM 元素，适合复杂交互；方式二：只用 D3 计算比例尺和布局，返回坐标数据给 React 渲染，适合简单图表。两种方式在这个技能中都有详细示例和模板。

D3.js 需要什么前置知识？

需要熟悉 JavaScript 基础（ES6+）和 DOM 操作。理解 SVG 基础（如 rect、circle、path 等元素）会很有帮助。对于地理可视化，需要了解 GeoJSON 格式；对于网络图，需要理解图的基本概念。这个技能提供了从零开始的代码示例，边学边做。