D3.js 数据可视化：绑定数据到文档

FreeGuideOnline 最新 2026-06-18

数据可视化 D3.js：绑定数据到文档

什么是 D3.js？

D3.js（Data-Driven Documents）是一个强大的 JavaScript 库，用于在浏览器中创建动态、交互式数据可视化。它的核心理念是将数据直接绑定到 DOM（文档对象模型）元素上，然后通过数据驱动的方式更新页面内容。借助 D3，你可以用 HTML、SVG 和 CSS 来表达数据，而无需被束缚在固定的图表模板中。

D3 提供了丰富的工具：选择集操作、比例尺、坐标轴、形状生成器、过渡动画等。但这一切的起点，都是数据绑定——这也是 D3 的灵魂所在。

D3 的核心：数据绑定

传统方式中，我们要手动创建 DOM 元素，然后将数据填入其中。D3 则反转了这一流程：你只需要描述当数据发生变化时，页面应该如何反应。D3 将数据“连接”到已存在（或即将存在）的 DOM 元素上，然后自动维护数据与视觉元素之间的映射。

这种“数据连接”的思想通过三个核心短语体现：Enter（数据多于元素时创建新元素）、Update（数据与元素一致时更新元素）、Exit（数据少于元素时移除多余元素）。理解这三个状态，就掌握了 D3 数据绑定的精髓。

选择集与数据连接

在 D3 中，数据绑定从选择集（Selection）开始。你通过 d3.select() 或 d3.selectAll() 选取 DOM 元素，然后调用 .data() 方法将数据数组与这些元素关联起来。

下面是一个最简单的例子：用一个数组生成一个列表。

// 引入 D3（使用 CDN）
// <script src="https://d3js.org/d3.v7.min.js"></script>

const numbers = [4, 8, 15, 16, 23];

// 选择 <ul> 元素，并绑定数据到尚未存在的 <li> 上
const listItems = d3.select("ul")
    .selectAll("li")
    .data(numbers);

// 处理 enter：为没有对应元素的数据创建新的 <li>
listItems.enter()
    .append("li")
    .text(d => d);  // d 是当前数据值

// 结果：<ul> 内部会生成 5 个 <li>，内容依次为 4, 8, 15, 16, 23

这里发生了什么？

  1. d3.select("ul") 选中页面上的 <ul> 容器。
  2. selectAll("li") 返回一个空的选择集（因为页面上还没有 <li>），但我们声明：未来的 <li> 元素将和 numbers 数组中的每个数据一一对应。
  3. .data(numbers) 将数组连接到这个选择集上，并返回一个包含 enter、update、exit 三部分的新选择集。
  4. enter() 代表那些“数据存在，但尚未有对应的 DOM 元素”的部分。我们为其追加 <li>，并用 .text() 设置内容。

这就是数据绑定的第一步：创建元素以匹配数据。接下来我们深入这三种状态。

理解 Enter、Update 和 Exit 模式

Enter：数据量多于元素时 —— 创建新元素

当绑定数据时，如果数据项的个数大于已有 DOM 元素的个数，多出的数据项就会落入 enter 选择集。通常我们会为它们创建新元素。

const data = ["苹果", "香蕉", "橙子"];
const p = d3.select("body").selectAll("p").data(data);
p.enter()
    .append("p")
    .text(d => `水果：${d}`);

如果 <body> 中原本没有任何 <p>，执行后会产生三个 <p> 元素。

Update：数据与元素已匹配 —— 更新现有元素

如果 DOM 中已经存在元素，并且它们与数据项一一对应（通常通过索引或键函数），那么这些元素便处于“update”状态。你可以直接通过选择集（不使用 .enter()）来更新它们的属性或文本。

const newData = [10, 20, 30];
const circles = d3.select("svg").selectAll("circle").data(newData);
// 假设 svg 中已有 3 个 <circle> 元素
circles.attr("r", d => d); // 更新半径

Exit：数据量少于元素时 —— 移除多余元素

当新数据数组的长度小于已有 DOM 元素的数量时，多余的元素会进入 exit 选择集。通常我们会将它们删除。

const shorterData = [5, 10]; // 只有两个数据
const bars = d3.select("svg").selectAll("rect").data(shorterData);
bars.exit().remove(); // 移除多余的 <rect>

这种模式允许我们声明式地处理数据变化，而不需要编写复杂的 for 循环或手动 DOM 操作。

实践：创建第一个数据绑定的条形图

让我们将这些概念整合起来，从零开始绘制一个简单的条形图。我们将使用 SVG，并用 D3 绑定数据到矩形元素。

// 准备一组数据
const dataset = [120, 230, 180, 90, 270];

// 定义 SVG 画布的宽高
const width = 400;
const height = 300;

// 创建 SVG 容器
const svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

// 将数据绑定到矩形
const bars = svg.selectAll("rect")
    .data(dataset)
    .enter()           // 因为最初没有 rect，所有数据都走 enter
    .append("rect")
    .attr("x", (d, i) => i * 70)        // 利用索引 i 设置水平位置
    .attr("y", d => height - d)         // 从底部向上绘制条形
    .attr("width", 50)
    .attr("height", d => d)             // 条形高度等于数据值
    .attr("fill", "steelblue");

当浏览器加载这段代码时，你会看到五个蓝色的垂直条形图。每个条形的高度和数据集中的值一一对应。如果后续你通过其他操作（例如按钮点击）重新绑定一个长度不同的数组，并调用 .enter()、update 和 .exit()，图形就会自动更新 —— 这正是数据绑定的威力。

高级数据绑定与键函数

前面的例子中，D3 默认使用索引来匹配数据和 DOM 元素：第一个数据对应第一个元素，第二个对应第二个，以此类推。但如果数据的顺序发生变化，或者你需要根据某个唯一标识来更新元素，仅靠索引就会出错。这时你需要提供一个键函数（key function）作为 .data() 的第二个参数。

键函数会为每个数据项返回一个字符串或数字，D3 将使用这个键来匹配元素。通常，我们使用数据对象中的 id 属性。

const initialData = [
  { id: "a", value: 30 },
  { id: "b", value: 50 },
  { id: "c", value: 80 }
];

const circles = svg.selectAll("circle")
    .data(initialData, d => d.id);  // 键函数：基于 id 匹配

circles.enter()
    .append("circle")
    .attr("cx", 100)
    .attr("cy", (d, i) => 100 + i * 60)
    .attr("r", d => d.value);

// 新数据：顺序打乱，且有一项被移除
const newData = [
  { id: "c", value: 55 },
  { id: "a", value: 45 }
];

const updatedCircles = svg.selectAll("circle")
    .data(newData, d => d.id);

// 更新存在的圆形（根据 id 匹配）
updatedCircles.attr("r", d => d.value);

// 移除 exit 中的元素（id: "b" 被删除）
updatedCircles.exit().remove();

通过键函数，D3 能准确识别出哪些元素需要保留和更新（id 为 "c" 和 "a"），哪些需要删除（"b"）。当你的数据具有稳定的标识时，务必使用键函数，这样才能创建更健壮、更流畅的可视化。

总结

数据绑定是 D3.js 的核心机制，它让你用声明式的方式将数据与 DOM 元素连接起来。牢记以下要点：

  • 使用 selectAll + data 建立数据连接。
  • Enter 用于创建新元素，Update 用于更新现有元素，Exit 用于清理多余元素。
  • 键函数提供更精确的匹配，避免因数据顺序改变导致视觉错位。

一旦熟练掌握了数据绑定，你就可以在此基础上叠加 D3 的比例尺、坐标轴、布局和过渡效果，构建出复杂而优雅的数据可视化作品。现在，打开你的代码编辑器，尝试用数据驱动的方式渲染一段属于你自己的图形吧！