D3.js 可视化技能概述
本技能为使用 d3.js 创建复杂、交互式数据可视化提供指导。D3.js（Data-Driven Documents）擅长将数据绑定到 DOM 元素，并应用数据驱动的变换，从而以对每个视觉元素的精确控制来创建自定义、出版级的可视化。相关技术适用于任何 JavaScript 环境，包括原生 JavaScript、React、Vue、Svelte 及其他框架。
何时使用 d3.js
适用场景包括：需要独特视觉编码或布局的自定义可视化；带有复杂平移、缩放或刷选行为的交互式探索；网络/图可视化（力导向布局、树图、层级图、和弦图）；使用自定义投影的地理可视化；需要平滑编排过渡的可视化；需要细粒度样式控制的出版级图形；标准库中没有的新颖图表类型。
应考虑替代方案的场景：3D 可视化应改用 Three.js。
核心工作流
- 设置 d3.js
在脚本顶部导入：import * as d3 from 'd3'; 或使用 CDN 版本（7.x）：<script src="https://d3js.org/d3.v7.min.js"></script>。所有模块（比例尺、坐标轴、形状、过渡等）均可通过 d3 命名空间访问。
- 选择集成模式
模式 A：直接 DOM 操作（多数情况推荐）。使用 d3 选择 DOM 元素并以命令式方式操作，适用于任何 JavaScript 环境。示例中通过 d3.select('#chart') 选择元素，清除既有内容，设定宽高与边距，然后绘制。数据变化时调用绘制函数。
模式 B：声明式渲染（适用于带模板的框架）。使用 d3 负责数据计算（比例尺、布局），由框架渲染元素：返回包含 x、y、width、height 的数组，在 React 中映射为 rect，在 Vue 中用 v-for，在原生 JS 中手动创建元素。复杂可视化、含过渡与交互、或需发挥 d3 全部能力时用模式 A；较简单可视化或框架偏好声明式渲染时用模式 B。
- 组织可视化代码结构
在绘制函数中遵循标准结构：检查数据为空则返回；选择 svg 并清除上次渲染；定义宽高与边距并计算内宽内高；创建带边距平移的主分组 g；创建比例尺（注意 y 轴范围需反转以适应 SVG 坐标）；创建并追加坐标轴（x 轴平移至底部）；绑定数据并用 join 创建视觉元素。最后在数据变化时调用。
- 实现响应式尺寸
使可视化适应容器尺寸：可通过监听 window resize 并在回调中读取容器 getBoundingClientRect 尺寸、设置 svg 宽高并重绘，返回清理函数在组件卸载时移除监听；也可使用 ResizeObserver 更直接地监测容器，观察父元素并在回调中重绘，返回断开观察的清理函数。
常见可视化图式
柱状图：使用 scaleBand 处理分类轴、scaleLinear 处理数值轴，绘制坐标轴并用 join("rect") 生成矩形，宽度取 bandwidth，高度为内高减去 y 比例尺值。
折线图：用 d3.line() 定义 x、y 访问器，可配合 curveMonotoneX 生成平滑曲线，以 path 的 d 属性绘制，设置 fill 为 none、stroke 与 stroke-width。
散点图：用 join("circle") 绘制，cx、cy 由比例尺映射，半径可用 sizeScale 做尺寸编码，填充可用 colourScale 做颜色编码，可设透明度。
和弦图：在圆形布局中展示实体间关系，用条带表示流量。数据为包含 source、target、value 的对象数组。先由数据构建节点列表与邻接矩阵，再用 d3.chord() 创建和弦布局、d3.arc() 定义弧、d3.ribbon() 定义条带，用 schemeCategory10 做颜色比例尺，绘制条带、分组弧与标签（标签角度取起止角中点并按角度旋转）。
热力图：用颜色在二维网格中编码数值。数据为包含 row、column、value 的对象数组。用 scaleBand 处理行列、scaleSequential 搭配 interpolateYlOrRd 做颜色比例尺，绘制矩形并添加行列标签，同时绘制颜色图例（用矩形条与 axisRight 构成渐变与刻度）。
饼图：用 d3.pie() 以 value 定义角度并设 sort(null)，用 d3.arc() 设内半径与半径，join("path") 绘制，填充用颜色比例尺，加白色描边。
力导向网络：用 d3.forceSimulation 并加入 link、charge（如 strength(-300)）、center 力，链接用 line 绘制、节点用 circle 绘制并绑定 d3.drag 拖拽，在 simulation 的 tick 事件中更新线的起止坐标与节点圆心坐标；拖拽开始、进行、结束分别处理 fix 坐标与 alphaTarget。
添加交互能力
提示框：在 body 上追加一个绝对定位的 tooltip div，初始隐藏并设 pointer-events 为 none；在元素上监听 mouseover、mousemove、mouseout，显示/隐藏提示框并设置内容与位置（如页面坐标偏移）。
缩放与平移：用 d3.zoom() 设置 scaleExtent（如 [0.5, 10]），在 zoom 事件中给分组 g 设置 transform，然后在 svg 上调用 zoom。
点击交互：在圆等元素上监听 click，可执行日志、视觉反馈（重置所有元素填充、高亮当前元素），或派发自定义事件供框架或应用监听。
过渡与动画
可为视觉变化添加平滑过渡：在元素上调用 transition()，设置 duration（如 750），再设置目标属性，例如将半径过渡到 10。