D3.js 交互数据可视化

要解决什么问题

业务里经常遇到「库能画柱状图，但布局、编码和交互都要按设计稿来」：力导向网络、弦图、地理投影、刷选缩放、过渡编排，Chart.js / ECharts 等标准方案要么做不到，要么改造成本很高。D3.js（Data-Driven Documents）的核心是把数据绑定到 DOM，用比例尺、布局与 selection 对每一个图形元素做精确控制，适合出版级、可探索的自定义可视化。

技能如何帮你落地

本技能按工程师常用路径组织内容，而不是罗列 API：

• 环境与集成：说明通过 d3 命名空间使用模块，并区分两种模式——模式 A 直接 DOM 操作（复杂交互、过渡优先）；模式 B 用 D3 算比例尺/布局，由 React/Vue/Svelte 等声明式渲染（简单图或团队习惯框架模板时）。
• 代码结构：绘图函数的标准骨架（尺寸、margin、svg、比例尺、坐标轴、join 数据更新），以及用 ResizeObserver 或容器测量实现响应式尺寸。
• 模式库：柱状图、折线图、散点图、热力图、饼图、弦图、力导向网络等示例思路，并覆盖工具提示、缩放平移、点击与 .transition() 动画。
• 工程细节：数据校验与准备、大数据集（如超过约 1000 个 DOM 节点时考虑 canvas 或聚合）、可访问性与统一样式；附带比例尺速查与 FAQ（坐标轴不显示、过渡无效、响应式失效、性能）。
• 配套资源：references/（模式、比例尺、配色）与 assets/ 中的 chart-template.js、interactive-template.js、sample-data.json 可作为起点再按框架改写。

适用边界

• 适合：自定义视觉编码、复杂交互探索、图/网络/层次结构、地理可视化、需要平滑过渡的叙事型图表。
• 不适合或应换方案：纯 3D 场景请用 Three.js；若只需常规仪表盘且接受固定图表类型，可优先更轻量的图表库，再仅在关键视图引入 D3。