# D3.js 数据可视化 ## 目录 * 首先阅读此内容 * 工作流程 * 创建基本图表工作流程 * 使用新数据更新可视化 * 创建高级布局工作流程 * 路径选择菜单 * 快速参考 ** ** ## 首先阅读本文 ### 这个技能有什么作用此技能可帮助您使用 D3.js（数据驱动文档）创建自定义的交互式数据可视化。 D3 为数据驱动的 DOM 操作、视觉编码、布局算法和交互提供低级构建块，从而实现图表库无法提供的定制可视化效果。 ### 何时使用 D3 **在以下情况下使用 D3：** * 图表库不支持您的特定设计 * 您需要完全的定制控制 * 创建网络图、层次结构或地理地图 * 构建具有链接视图的交互式仪表板 * 动画数据变化流畅 * 使用复杂或非常规的数据结构 **在以下情况下不要使用 D3：** * 简单的条形图/折线图就足够了（使用 Chart.js、Highcharts——更简单） * 您需要 3D 可视化（使用 Three.js、WebGL） * 海量数据集>10K点，无需聚合（性能限制） * 您不熟悉 JavaScript/SVG/CSS（需要先决条件） ### 核心概念 **数据连接**：将数组绑定到 DOM 元素，创建一对一的对应关系 **比例**：转换数据值 → 视觉值（像素、颜色、大小） **形状**：从数据生成线、面积、弧的 SVG 路径 **布局**：计算复杂可视化的位置（网络、树、地图） **过渡**：在状态之间平滑变化的动画 **交互**：添加缩放、平移、拖动、画笔选择行为 ### 技能结构 * **[入门]()**：设置、先决条件、首次可视化 * **[选择和数据连接]()**：DOM 操作、数据绑定 * **[Scales& Axes]()**：数据转换、轴生成 * **[形状和布局]()**：路径生成器，基本布局 * **[高级布局]()**：力模拟、层次结构、地理地图 * **[过渡和交互]()**：动画、缩放/平移/拖动/画笔 * **[工作流程]()**：常见图表类型的分步指南 * **[常见模式]()**：可重用的代码模板 ** ** ## 工作流程根据您当前的任务选择工作流程： ### 创建基本图表工作流程 **使用场合：**从头开始构建条形图、折线图或散点图 **时间：** 1-2小时 **复制此清单并跟踪您的进度：** 基本图表进度： - [ ] 第 1 步：设置带边距的 SVG 容器 - [ ] 步骤2：加载并解析数据 - [ ] 步骤 3：创建比例 (x, y) - [ ] 步骤 4：生成轴 - [ ] 步骤5：绑定数据并创建视觉元素 - [ ] 第 6 步：设计样式并添加交互性 **第 1 步：设置带边距的 SVG 容器** 创建具有适当尺寸的 SVG 元素。定义轴的边距：“{top：20，right：20，bottom：30，left：40}”。计算内部宽度/高度：`width - margin.left - margin.right`。请参阅[入门]()。 **第2步：加载并解析数据** 对于外部文件使用“d3.csv('data.csv')”或直接定义数据数组。使用“d3.timeParse('%Y-%m-%d')”解析日期以获取时间序列。使用转换函数将 CSV 数据的字符串转换为数字。请参阅[入门]()。 **第 3 步：创建比例** 根据数据选择尺度类型：“scaleBand”（分类）、“scaleTime”（时间）、“scaleLinear”（定量）。使用“d3.extent()”、“d3.max()”或手动范围从数据设置域。设置 SVG 尺寸的范围。请参阅[比例和轴]()。 **第4步：生成轴** 创建轴生成器：`d3.axisBottom(xScale)`、`d3.axisLeft(yScale)`。附加通过变换定位的 g 元素。调用轴生成器：`.call(axis)`。使用 `.ticks()`、`.tickFormat()` 自定义刻度。请参阅[比例和轴]()。 **第5步：绑定数据并创建视觉元素** 使用数据连接模式：`svg.selectAll(type).data(array).join(type)`。使用比例和访问器函数设置属性：`.attr('x', d => xScale(d.category))`。对于折线图，请使用“d3.line()”生成器。对于散点图，使用“cx”、“cy”、“r”属性创建圆圈。请参阅[选择和数据连接]() 和[形状和布局]()。 **第 6 步：设计样式并添加交互性** 应用颜色：`.attr('fill', ...)`、`.attr('lines', ...)`。添加悬停效果：带有工具提示的“.on('mouseover', ...)”。添加用于向下钻取的点击处理程序。对初始动画应用过渡（可选）。请参阅[过渡和交互]() 和 [常见模式]()。 ** ** ### 使用新数据更新可视化 **使用时间：** 使用新数据刷新图表（实时、过滤器、用户交互） **时间：** 30 分钟 - 1 小时 **复制此清单：** 更新进度： - [ ] 步骤一：将可视化封装在更新函数中 - [ ] 步骤 2：根据需要更新比例域 - [ ] 第三步：用按键功能重新绑定数据 - [ ] 第 4 步：添加转场以加入 - [ ] 步骤 5：使用新值更新属性 - [ ] 步骤 6：数据更改时触发更新 **步骤1：将可视化封装在更新函数中** 将基本图表工作流程中的步骤 3-5 包含在 `function update(newData) { ... }` 中。这使得可视化可重复用于任何数据集。请参阅[工作流程]()。 **步骤 2：更新比例域** 当数据范围改变时重新计算域：`yScale.domain([0, d3.max(newData, d => d.value)])`。使用过渡更新轴：`svg.select('.y-axis').transition().duration(500).call(yAxis)`。请参阅[选择和数据连接]()。 **第三步：用按键功能重新绑定数据** 使用关键函数来保持对象稳定性：`.data(newData, d => d.id)`。确保元素跟踪数据项，而不是数组位置。对于正确的转换至关重要。请参阅[选择和数据连接]()。 **第 4 步：添加转换以加入** 在属性更新之前插入`.transition().duration(500)`。使用“.ease(d3.easeCubicOut)”指定缓动。对于自定义进入/退出效果，请使用“.join()”中的进入/退出函数。请参阅[过渡和交互]()。 **步骤 5：使用新值更新属性** 使用更新的比例设置位置/大小：`.attr('y', d => yScale(d.value))`、`.attr('height', d => height - yScale(d.value))`。从旧价值观到新价值观的转变充满活力。请参阅[常见模式]()。 **第 6 步：数据更改时触发更新** 当数据更改时调用“update(newData)”：按钮点击、计时器（“setInterval”）、WebSocket 消息、API 响应。为了实时，使用滑动窗口来限制数据点。请参阅[工作流程]()。 ** ** ### 创建高级布局工作流程 **使用场合：**构建网络图、层次结构或地理地图 **时间：** 2-4小时 **复制此清单：** 高级布局进度： - [ ] 第 1 步：选择合适的布局类型 - [ ] 第 2 步：准备和构建数据 - [ ] 步骤 3：创建并配置布局 - [ ] 步骤 4：将布局应用于数据 - [ ] 步骤 5：将计算属性绑定到元素 - [ ] 第 6 步：添加交互（拖动、缩放） **第 1 步：选择合适的布局类型** **力模拟**：网络图、有机聚类。 **层次结构**：树、簇（节点链接）、树形图、包、分区（空间填充）。 **地理**：带有投影的地图。 **和弦**：流程图。请参阅[高级布局]()以获取决策指导。 **第 2 步：准备和构建数据** **强制**：`节点= [{id，组}]`，`链接= [{源，目标}]`。 **Hierarchy** ：带有子数组的嵌套对象，使用“d3.hierarchy(data)”进行转换。 **地理**：GeoJSON 功能。请参阅[高级布局]()。 **步骤 3：创建并配置布局** **强制**：`d3.forceSimulation(nodes).force('link', d3.forceLink(links)).force('charge', d3.forceManyBody())`。 **层次结构**：`d3.treemap().size([宽度，高度])`。 **地理**：`d3.geoMercator().fitExtent([[0,0], [宽度,高度]], geojson)`。有关每种布局类型，请参阅[高级布局]()。 **第 4 步：将布局应用于数据** **强制**：模拟自动运行，每次更新节点位置。 **层次结构** ：在根上调用布局：`treemap(root)`。 **地理**：无需应用程序，在路径生成器中使用投影。请参阅[高级布局]()。 **步骤 5：将计算属性绑定到元素** **强制** ：更新刻度处理程序中的 `cx`、`cy`：`node.attr('cx', d => d.x)`。 **层次结构** ：使用 `d.x0`、`d.x1`、`d.y0`、`d.y1` 作为矩形。 **地理** ：使用“path(feature)”作为“d”属性。有关特定于布局的示例，请参阅[工作流程]()。 **第 6 步：添加交互** **拖动**用于强制网络：`node.call(d3.drag().on('drag', DragHandler))`。 **地图/大型网络的缩放**：`svg.call(d3.zoom().on('zoom', ZoomHandler))`。 **单击**可深入了解层次结构。请参阅[过渡和交互]()。 ** ** ## 路径选择菜单 **你想做什么？** 1. **[我是 D3 新手]()** \- 设置环境，了解先决条件，创建第一个可视化 2. **[构建基本图表]()** \- 逐步绘制条形图、折线图或散点图 3. **[使用尺度转换数据]()** \- 将数据值映射到视觉属性（位置、颜色、大小） 4. **[将数据绑定到元素]()** \- 将数组连接到 DOM 元素，处理动态更新 5. **[创建网络/层次结构/地图]()** \- 强制导向图、树形图、地理可视化 6. **[添加动画]()** \- 图表状态之间的平滑过渡 7. **[添加交互性]()** \- 缩放、平移、拖动、画笔选择、工具提示 8. **[用新数据更新图表]()** \- 处理实时数据、过滤器、用户交互 9. **[获取代码模板]()** \- 常见模式的复制粘贴修改模板 10. **[了解 D3 概念]()** \- 深入研究数据连接、缩放、生成器、布局 ** ** ## 快速参考 ### 数据连接模式（核心 D3 工作流程） // 1.选择容器 const svg = d3.select('svg'); // 2. 绑定数据 svg.selectAll('圆') .data(数据数组) .join('circle') // 自动创建/更新/删除元素 .attr('cx', d => d.x) // 使用访问器函数（d = 数据，i = 索引） .attr('cy', d => d.y) .attr('r', 5); ### 规模创建（数据→视觉转换） // 对于定量数据常量 xScale = d3.scaleLinear() .domain([0, 100]) // 数据范围 .range([0, 500]); // 像素范围 // 对于分类数据 const xScale = d3.scaleBand() .domain(['A', 'B', 'C']) .范围([0, 500]) .填充(0.1); // 对于时间数据 const xScale = d3.scaleTime() .domain([新日期(2020, 0, 1), 新日期(2020, 11, 31)]) .range([0, 500]); ### 形状生成器（SVG 路径创建） // 折线图常量行 = d3.line() .x(d => xScale(d.date)) .y(d => yScale(d.value)); svg.append('路径') .datum(data) // 对单个数据项使用 .datum() .attr('d', line) // 线生成器创建路径数据 .attr('填充', '无') .attr('中风', '钢蓝'); ### 过渡（动画） // 在属性更新之前添加转换 svg.selectAll('矩形') .data(新数据) .join('矩形') .transition() // 此后的所有内容都是动画的 .duration(500) // 毫秒 .attr('高度', d => yScale(d.value)); ### 常见音阶类型数据类型 |任务|规模 ---|---|--- 定量（线性）|位置、尺寸| `scaleLinear()` 定量（指数）|压缩范围| `scaleLog()`、`scalePow()` 定量→圆面积|尺寸圈| `scaleSqrt()` 分类 |酒吧、团体 | `scaleBand()`、`scalePoint()` 分类 → 颜色 |颜色编码 | `scaleOrdinal()` 颞叶 |时间序列| `scaleTime()` 定量 → 颜色 |热图 | `scaleSequential()` ### D3 模块导入 (ES6) // 具体函数从 'd3-selection' 导入 { select, selectAll }; 从“d3-scale”导入{scaleLinear，scaleBand}；从 'd3-shape' 导入 { 线，面积 }； // 整个 D3 命名空间从 'd3' 导入 * 作为 d3； ### 按任务划分的关键资源 * **设置和第一个图表**：[入门]() * **数据绑定**：[选择和数据连接]() * **尺度和轴**：[尺度和轴]() * **图表类型** : [工作流程]() \+ [常见模式]() * **网络和树**：[高级布局]() \+ [高级布局]() * **地图** ：[高级布局]() * **动画** ：[过渡和交互]() * **交互性** ：[过渡和交互]() ** ** ## 后续步骤 1. **刚接触 D3？** 从【入门】开始() 2. **了解基础知识吗？** 跳转到[工作流程]()了解特定图表类型 3. **需要参考？** 使用[常见模式]()作为模板 4. **构建自定义可视化？** 探索[高级布局]()

D3 可视化

包含技能