d3-viz

用途

d3-viz 技能用于指导用户使用 d3.js 创建复杂、交互式的数据可视化。d3.js（Data-Driven Documents）的核心能力是将数据绑定到 DOM 元素，并对其施加数据驱动的变换，从而对每一个视觉元素进行精确控制，生成自定义的、出版级质量的图形。文档说明这些技术适用于任何 JavaScript 环境，包括原生 JavaScript、React、Vue、Svelte 等框架。

适用场景

资料列出 d3.js 适合以下情况：需要独特视觉编码或布局的自定义可视化；带复杂平移、缩放或刷选行为的交互式探索；网络/图可视化（力导向布局、树图、层次结构、和弦图）；使用自定义投影的地理可视化；需要平滑、编排式过渡的可视化；具备细粒度样式控制的出版级图形；标准库中不存在的新颖图表类型。资料同时指出，对于 3D 可视化应考虑改用 Three.js。

核心工作流

1. 设置 d3.js：在脚本顶部使用 import * as d3 from 'd3';，或使用 7.x 版本的 CDN https://d3js.org/d3.v7.min.js。所有模块（比例尺、坐标轴、形状、过渡等）都可通过 d3 命名空间访问。

2. 选择集成模式。资料给出两种模式：

   • 模式 A：直接 DOM 操作（大多数情况下推荐），使用 d3 选择 DOM 元素并以命令式方式操作，适用于任何 JavaScript 环境。
   • 模式 B：声明式渲染（适用于带模板的框架），仅用 d3 做数据计算（比例尺、布局），再通过框架渲染元素。资料建议复杂可视化（过渡、交互或需发挥 d3 全部能力）用模式 A，较简单可视化或框架偏好声明式渲染时用模式 B。

3. 组织可视化代码结构。资料给出的标准结构为：定义尺寸与边距、创建带边距的主分组、创建比例尺、创建并追加坐标轴、绑定数据并创建视觉元素。

4. 实现响应式尺寸。资料提供两种方式：基于 window resize 事件监听并返回清理函数，或使用 ResizeObserver 观察容器元素。

常见可视化模式

资料给出了多类图表的实现方式与代码示例：

• 柱状图（Bar chart）：使用 d3.scaleBand() 与 d3.scaleLinear()，通过 join("rect") 绘制矩形。
• 折线图（Line chart）：使用 d3.line() 定义 x/y 访问器与 d3.curveMonotoneX 平滑曲线，绘制 path。
• 散点图（Scatter plot）：绘制 circle，可按 sizeScale 编码大小、按 colourScale 编码颜色，并设置透明度。
• 和弦图（Chord diagram）：以圆形布局展示实体间关系，丝带表示流向。资料给出从 source/target/value 数据构建矩阵、使用 d3.chord()、d3.arc()、d3.ribbon() 绘制丝带、分组弧线与标签的完整示例。
• 热力图（Heatmap）：用颜色编码二维网格中的值。资料给出 scaleBand 构建行列、scaleSequential(d3.interpolateYlOrRd) 着色、绘制矩形、添加轴标签与颜色图例的示例。
• 饼图（Pie chart）：使用 d3.pie() 与 d3.arc()。
• 力导向网络（Force-directed network）：使用 d3.forceSimulation 配置 link、charge、center 力，绘制连线与节点，并实现拖拽函数 dragstarted、dragged、dragended。

添加交互性

资料给出三类交互实现：

• 提示框（Tooltips）：在 SVG 外创建 div，通过 mouseover、mousemove、mouseout 事件控制显示位置与内容。
• 缩放与平移（Zoom and pan）：使用 d3.zoom()，设置 scaleExtent 并在 zoom 事件中更新分组 transform。
• 点击交互（Click interactions）：通过 click 事件处理逻辑、更新视觉反馈，并可分发自定义事件供框架监听。

过渡与动画

资料说明可通过 transition() 添加平滑过渡，例如 .transition().duration(750).attr("r", 10);，并提到可链式调用（原文在此处截断，未提供后续内容）。

限制

资料未说明该技能的收费、价格、具体平台要求或效果保证。对于 3D 可视化，资料明确建议改用 Three.js。其余未在资料中提及的功能或使用步骤暂未提供。