---

name: claude-d3js-skill description: "此技能提供使用 d3.js 创建复杂交互式数据可视化的指导。" risk: unknown source: community date_added: "2026-02-27"

D3.js 可视化

概述

此技能提供使用 d3.js 创建复杂交互式数据可视化的指导。D3.js（数据驱动文档）擅长将数据绑定到 DOM 元素并应用数据驱动的转换，以精确控制每个视觉元素来创建自定义的出版级可视化。这些技术适用于任何 JavaScript 环境，包括原生 JavaScript、React、Vue、Svelte 和其他框架。

何时使用 d3.js

使用 d3.js 的场景：

• 需要独特视觉编码或布局的自定义可视化
• 具有复杂平移、缩放或刷选行为的交互式探索
• 网络/图形可视化（力导向布局、树形图、层次结构、弦图）
• 使用自定义投影的地理可视化
• 需要流畅编排过渡的可视化
• 具有精细样式控制的出版级图形
• 标准库中不可用的新型图表类型

考虑替代方案的场景：

• 3D 可视化 - 改用 Three.js

核心工作流

1. 设置 d3.js

在脚本顶部导入 d3：

import * as d3 from 'd3';

或使用 CDN 版本 (7.x)：

<script src="https://d3js.org/d3.v7.min.js"></script>

所有模块（比例尺、坐标轴、形状、过渡等）都可通过 d3 命名空间访问。

2. 选择集成模式

模式 A：直接 DOM 操作（大多数情况推荐） 使用 d3 选择 DOM 元素并命令式地操作它们。这适用于任何 JavaScript 环境：

function drawChart(data) {
  if (!data || data.length === 0) return;
  const svg = d3.select('#chart');
  svg.selectAll("*").remove();
  const width = 800;
  const height = 400;
  const margin = { top: 20, right: 30, bottom: 40, left: 50 };
}
drawChart(myData);

模式 B：声明式渲染（用于带模板的框架） 使用 d3 进行数据计算（比例尺、布局），但通过框架渲染元素：

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
  }));
}

对于具有过渡、交互或需要利用 d3 全部功能的复杂可视化使用模式 A。对于更简单的可视化或框架偏好声明式渲染时使用模式 B。

3. 结构化可视化代码

在绘图函数中遵循此标准结构：

function drawVisualization(data) {
  if (!data || data.length === 0) return;
  const svg = d3.select('#chart');
  svg.selectAll("*").remove();
  const width = 800, height = 400;
  const margin = { top: 20, right: 30, bottom: 40, left: 50 };
  const innerWidth = width - margin.left - margin.right;
  const innerHeight = height - margin.top - margin.bottom;
  const g = svg.append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);
  const xScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.x)])
    .range([0, innerWidth]);
  const yScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.y)])
    .range([innerHeight, 0]);
  g.append("g").attr("transform", `translate(0,${innerHeight})`).call(d3.axisBottom(xScale));
  g.append("g").call(d3.axisLeft(yScale));
  g.selectAll("circle").data(data).join("circle")
    .attr("cx", d => xScale(d.x))
    .attr("cy", d => yScale(d.y))
    .attr("r", 5).attr("fill", "steelblue");
}
drawVisualization(myData);

4. 实现响应式尺寸

使可视化响应容器大小：

function setupResponsiveChart(containerId, data) {
  const container = document.getElementById(containerId);
  const svg = d3.select(`#${containerId}`).append('svg');
  function updateChart() {
    const { width, height } = container.getBoundingClientRect();
    svg.attr('width', width).attr('height', height);
  }
  window.addEventListener('resize', updateChart);
  updateChart();
}

使用时机

此技能适用于执行概述中描述的工作流或操作。

限制

• 仅在任务明确匹配上述范围时使用此技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少所需输入、权限、安全边界或成功标准，请停下来寻求澄清。