d3-viz

# D3.js 可视化 ## 概述 本技能提供使用 d3.js 创建复杂、交互式数据可视化的指南。D3.js (Data-Driven Documents) 擅长将数据绑定到 DOM 元素，并应用数据驱动的转换，从而创建具有对每个视觉元素精确控制的、出版级质量的可视化效果。这些技术适用于任何 JavaScript 环境，包括原生 JavaScript、React、Vue、Svelte 和其他框架。 ## 何时使用 d3.js **在以下情况使用 d3.js：** - 需要独特视觉编码或布局的自定义可视化 - 具有复杂平移、缩放或刷选行为的交互式探索 - 网络/图表可视化（力导向布局、树状图、层级结构、弦图） - 具有自定义投影的地理可视化 - 需要平滑、编排过渡的可视化 - 具有精细样式控制的出版级图形 - 标准库中不可用的新颖图表类型 **考虑替代方案：** - 3D 可视化 - 请改用 Three.js ## 核心工作流 ### 1. 设置 d3.js 在脚本顶部导入 d3： javascript import * as d3 from 'd3'; 或使用 CDN 版本 (7.x)： html 所有模块（比例尺、坐标轴、形状、过渡等）均可通过 `d3` 命名空间访问。 ### 2. 选择集成模式 **模式 A：直接 DOM 操作（大多数情况推荐）** 使用 d3 选择 DOM 元素并命令式地操作它们。这适用于任何 JavaScript 环境： javascript function drawChart(data) { if (!data || data.length === 0) return; const svg = d3.select('#chart'); // 按 ID、类或 DOM 元素选择 // 清除之前的内容 svg.selectAll("*").remove(); // 设置尺寸 const width = 800; const height = 400; const margin = { top: 20, right: 30, bottom: 40, left: 50 }; // 创建比例尺、坐标轴并绘制可视化 // ... 在此处编写 d3 代码 ... } // 数据变化时调用 drawChart(myData); **模式 B：声明式渲染（适用于带有模板的框架）** 使用 d3 进行数据计算（比例尺、布局），但通过你的框架渲染元素： javascript function getChartElements(data) { const xScale = d3.scaleLinear() .domain([0, d3.max(data, d => d.value)]) .range([0, 400]); return data.map((d, i) => ({ x: 50, y: i * 30, width: xScale(d.value), height: 25 })); } // 在