name: d3js-visualization description: “使用D3.js创建专业数据可视化，支持交互式图表、自定义可视化、动画和响应式设计。适用于：(1) 创建自定义交互式图表，(2) 构建仪表板，(3) 网络/图可视化，(4) 地理数据映射，(5) 时间序列分析，(6) 实时数据可视化，(7) 复杂多维数据显示”

D3.js 数据可视化技能

什么是 D3.js

D3.js（数据驱动文档）是一个JavaScript库，用于在Web浏览器中生成动态、交互式的数据可视化。它使用HTML、SVG和CSS标准将数据绑定到DOM并应用数据驱动的转换。

何时使用 D3.js

选择 D3.js 当您需要：

图表库中没有的自定义、独特可视化
对每个视觉元素的精细控制
复杂的交互和动画
不仅仅是图表的数据驱动DOM操作
大数据集的性能（使用Canvas时）
基于Web标准的可视化

考虑替代方案当：

简单的标准图表就足够（使用 Chart.js、Plotly）
快速原型设计是优先事项（使用 Observable、Vega-Lite）
用于打印/报告的静态图表（使用 matplotlib、ggplot2）
3D可视化（使用 Three.js、WebGL库）

D3.js 与其他库对比

库	最适合	学习曲线	自定义程度
D3.js	自定义可视化	陡峭	完全
Chart.js	标准图表	简单	有限
Plotly	科学绘图	中等	良好
Highcharts	商业仪表板	简单	良好
Three.js	3D图形	陡峭	完全

核心工作流程

1. 项目设置

选项1：CDN（快速开始）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>D3可视化</title>
  <style>
    body { margin: 0; font-family: sans-serif; }
    svg { display: block; }
  </style>
</head>
<body>
  <div id="chart"></div>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <script>
    // 您的代码在这里
  </script>
</body>
</html>

选项2：NPM（生产环境）

npm install d3

// 导入所有D3
import * as d3 from "d3";

// 或导入特定模块
import { select, selectAll } from "d3-selection";
import { scaleLinear, scaleTime } from "d3-scale";

2. 创建基本图表

// 设置尺寸和边距
const margin = {top: 20, right: 30, bottom: 40, left: 50};
const width = 800 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

// 创建SVG
const svg = d3.select("#chart")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", `translate(${margin.left},${margin.top})`);

// 加载和处理数据
d3.csv("data.csv", d => ({
  date: new Date(d.date),
  value: +d.value
})).then(data => {

  // 创建比例尺
  const xScale = d3.scaleTime()
    .domain(d3.extent(data, d => d.date))
    .range([0, width]);

  const yScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)])
    .nice()
    .range([height, 0]);

  // 创建并添加坐标轴
  svg.append("g")
    .attr("transform", `translate(0,${height})`)
    .call(d3.axisBottom(xScale));

  svg.append("g")
    .call(d3.axisLeft(yScale));

  // 创建线条生成器
  const line = d3.line()
    .x(d => xScale(d.date))
    .y(d => yScale(d.value))
    .curve(d3.curveMonotoneX);

  // 绘制线条
  svg.append("path")
    .datum(data)
    .attr("d", line)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 2);
});

3. 添加交互性

工具提示：

const tooltip = d3.select("body")
  .append("div")
  .attr("class", "tooltip")
  .style("position", "absolute")
  .style("visibility", "hidden")
  .style("background", "white")
  .style("border", "1px solid #ddd")
  .style("padding", "10px")
  .style("border-radius", "4px");

circles
  .on("mouseover", function(event, d) {
    tooltip
      .style("visibility", "visible")
      .html(`<strong>${d.name}</strong><br/>值: ${d.value}`);
  })
  .on("mousemove", function(event) {
    tooltip
      .style("top", (event.pageY - 10) + "px")
      .style("left", (event.pageX + 10) + "px");
  })
  .on("mouseout", function() {
    tooltip.style("visibility", "hidden");
  });

过渡动画：

circles
  .transition()
  .duration(300)
  .ease(d3.easeCubicOut)
  .attr("r", 8);

4. 实现响应式设计

function createChart() {
  const container = d3.select("#chart");
  const containerWidth = container.node().getBoundingClientRect().width;

  const margin = {top: 20, right: 30, bottom: 40, left: 50};
  const width = containerWidth - margin.left - margin.right;
  const height = Math.min(width * 0.6, 500);

  container.selectAll("*").remove(); // 清除之前的

  // 创建SVG...
}

// 初始渲染
createChart();

// 防抖调整大小重新渲染
let resizeTimer;
window.addEventListener("resize", () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(createChart, 250);
});

关键原则

数据绑定

使用 .data() 将数据绑定到DOM元素
处理进入、更新和退出选择集
使用键函数进行一致的元素到数据匹配
现代语法：使用 .join() 获得更简洁的代码

比例尺

将数据值（定义域）映射到视觉值（值域）
使用适当的比例尺类型（线性、时间、序数、序数带）
对比例尺应用 .nice() 以获得圆整的坐标轴值
反转y比例尺值域以获得自下而上的坐标：[height, 0]

SVG坐标系

原点 (0,0) 位于左上角
Y向下增加（与笛卡尔坐标相反）
使用边距约定进行适当的间距
使用 <g> 标签分组相关元素

性能

对于 <1,000 个元素使用SVG
对于 >1,000 个元素使用Canvas
聚合或采样大型数据集
防抖调整大小处理程序

图表选择指南

时间序列数据？ → 折线图或面积图

比较类别？ → 条形图（垂直或水平）

显示关系？ → 散点图或气泡图

部分到整体？ → 环形图或堆叠条形图（限制为5-7个类别）

网络数据？ → 力导向图

分布？ → 直方图或箱线图

参见 references/chart-types.md 获取详细的图表选择标准和最佳实践。

常见模式

快速数据加载

// 加载CSV并进行类型转换
d3.csv("data.csv", d => ({
  date: new Date(d.date),
  value: +d.value,
  category: d.category
})).then(data => {
  createChart(data);
});

快速工具提示

selection
  .on("mouseover", (event, d) => {
    tooltip.style("visibility", "visible").html(`值: ${d.value}`);
  })
  .on("mousemove", (event) => {
    tooltip.style("top", event.pageY + "px").style("left", event.pageX + "px");
  })
  .on("mouseout", () => tooltip.style("visibility", "hidden"));

快速响应式SVG

svg
  .attr("viewBox", `0 0 ${width} ${height}`)
  .attr("preserveAspectRatio", "xMidYMid meet")
  .style("width", "100%")
  .style("height", "auto");

质量标准

视觉质量

为数据使用适当的图表类型
应用一致的配色方案
包含清晰的坐标轴标签和图例
使用边距约定提供适当的间距
使用适当的比例尺类型和范围

交互质量

添加有意义的工具提示
使用平滑过渡（300-500ms持续时间）
提供悬停反馈
为可访问性启用键盘导航
为详细探索实现缩放/平移

代码质量

在数据连接中使用键函数
正确处理进入、更新和退出
在更新前清理之前的渲染
使用可重用图表模式实现模块化
防抖昂贵操作

可访问性

添加ARIA标签和描述
提供键盘导航
使用色盲安全调色板
为屏幕阅读器包含文本替代方案
确保足够的颜色对比度

辅助资源

可用脚本

data-helpers.js：数据加载、解析和转换实用程序
chart-templates.js：常见可视化的可重用图表模板

参见 scripts/ 目录获取实现。

工作示例

line-chart.html：带工具提示的时间序列可视化
bar-chart.html：分组和堆叠条形图
network-graph.html：力导向网络可视化

参见 examples/ 目录获取完整实现。

详细参考资料

D3基础：SVG基础、数据绑定、选择集、过渡、事件 → references/d3-fundamentals.md
比例尺和坐标轴：所有比例尺类型、坐标轴自定义、颜色调色板 → references/scales-and-axes.md
路径和形状：线条/面积生成器、弧、力模拟 → references/paths-and-shapes.md
数据转换：加载、解析、分组、聚合、日期处理 → references/data-transformation.md
图表类型：何时使用每种图表类型的详细指南 → references/chart-types.md
高级模式：可重用图表、性能优化、响应式设计 → references/advanced-patterns.md
常见陷阱：常见错误及其解决方案 → references/common-pitfalls.md
集成模式：在React、Vue、Angular、Svelte中使用D3 → references/integration-patterns.md

故障排除

图表未显示？

检查浏览器控制台是否有错误
验证数据是否正确加载
确保SVG具有宽度和高度
检查比例尺定义域和值域

元素位置错误？

验证比例尺定义域是否匹配数据范围
检查y比例尺值域是否反转：[height, 0]
确认边距变换已应用于 <g> 元素
检查SVG坐标系（左上角原点）

过渡动画不工作？

确保持续时间合理（300-500ms）
检查过渡是否应用于选择集，而不是数据
验证缓动函数是否有效
确认元素在过渡前存在

性能差？

减少DOM元素数量（如果>1,000则使用Canvas）
聚合或采样数据
防抖调整大小处理程序
最小化重绘

外部资源

官方文档

D3.js API参考：https://d3js.org/
Observable示例：https://observablehq.com/@d3

学习资源

Scott Murray的《Web交互式数据可视化》
D3图库：https://d3-graph-gallery.com/
Amelia Wattenberger的D3教程：https://wattenberger.com/blog/d3

颜色工具

ColorBrewer：https://colorbrewer2.org/
D3配色方案：https://d3js.org/d3-scale-chromatic

灵感来源

Observable趋势：https://observablehq.com/trending
Reddit r/dataisbeautiful：https://reddit.com/r/dataisbeautiful

此技能全面覆盖了使用D3.js创建专业、交互式数据可视化的内容。使用核心工作流程作为起点，参考详细参考资料获取特定主题，并根据您的需求自定义示例。