D3.js 数据更新与图表更新

D3.js 是数据驱动的 JavaScript 可视化库，它能够帮助我们在前端界面中呈现数据。本文将详细介绍如何使用 D3.js 来实现数据更新和图表更新。

数据更新

在使用 D3.js 时，我们可以将数据与图表联系起来。当我们需要更新数据时，D3.js 提供了以下方法：

datum

datum 方法用于设置或获取绑定到选择元素的单个数据值。例如，我们有一个包含数字的数组，并将其绑定到一个 HTML 元素上：

const data = [1, 2, 3, 4, 5];
const div = d3.select("div");

div.datum(data);

现在，我们将每个数据项与元素的文本内容相匹配：

div.selectAll("p")
   .data(d => d)
   .join("p")
   .text(d => d);

这里的 data 方法返回一个数组，用于表示每个元素应该与哪个数据项相关联。然后，join 方法创建新的段落元素并返回其选择集。最后，我们使用 text 方法为每个段落元素填充文本。

如果我们想要添加新的数据项，只需将其添加到原始数据数组中，然后再次调用 datum 方法：

data.push(6);

div.datum(data);

div.selectAll("p")
   .data(d => d)
   .join("p")
   .text(d => d);

现在，我们的图表将显示一个新的段落元素，其中文本内容为 "6"。

data

data 方法与 datum 方法类似，但它用于设置或获取绑定到选择元素的数据数组。例如，我们有两个数组并想要将它们绑定到同一个 HTML 元素上：

const data1 = [1, 3, 5];
const data2 = [2, 4, 6];

const div = d3.select("div");

div.data([data1, data2]);

现在，我们将每个数据项与元素的文本内容相匹配：

div.selectAll("p")
   .data(d => d)
   .join("p")
   .text(d => d.join(", "));

这里的 data 方法返回一个包含两个数组的数组，用于表示每个元素应该与哪些数据项相关联。然后，join 方法创建新的段落元素并返回其选择集。最后，我们使用 text 方法为每个段落元素填充文本。

如果我们想要添加新的数据数组，只需将其添加到原始数据数组中，然后再次调用 data 方法：

const data3 = [7, 8, 9];

div.data([data1, data2, data3]);

div.selectAll("p")
   .data(d => d)
   .join("p")
   .text(d => d.join(", "));

现在，我们的图表将显示一个新的段落元素，其中文本内容为 "7, 8, 9"。

图表更新

当数据更新时，我们可能需要相应地更新图表。D3.js 提供了以下方法来实现这一点：

enter

enter 方法用于将新数据绑定到新元素上。例如，我们要绑定一个包含数字的数组，并将其与段落元素相关联：

const data = [1, 2, 3, 4, 5];
const div = d3.select("div");

div.selectAll("p")
   .data(data)
   .join("p")
   .text(d => d);

这里的 data 方法返回一个数组，用于表示每个元素应该与哪个数据项相关联。然后，join 方法根据需要创建新的段落元素并返回其选择集。最后，我们使用 text 方法为每个段落元

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27026