什么是 D3 数据驱动文档

我们都习惯名称 D3.js ，它可能忘了 D3 实际上是 DDD （ d ata- d 里文 d ocuments）。这就是 D3 做得很好，DOM（文档对象模型）操作的数据驱动方法：D3 将数据绑定到 DOM 元素，并根据有界数据操作这些元素。

让我们看一下这个例子中 D3 的一个非常基本的特征。在这里，我们不会附加任何 SVG 元素。相反，我们将使用页面上已存在的 SVG，如下所示：

<svg width="400" height="400">
    <circle cx="50" cy="50" r="10"></circle>
    <circle cx="150" cy="50" r="10"></circle>
    <circle cx="210" cy="320" r="10"></circle>
    <circle cx="210" cy="30" r="10"></circle>
    <circle cx="180" cy="200" r="10"></circle>
</svg>

这是一个非常基本的 SVG，有 5 个圆圈。现在，这些圈子并没有绑定任何数据。我们来看看这最后的指控：

在我们的代码中，我们写道：

var svg = d3.select("svg");
var circles = svg.selectAll("circle");
console.log(circles.nodes());

在这里，d3.select("svg") 返回一个包含 <svg width="400" height="400"></svg> 标签的 d3 对象和所有子标签 <circle>s。请注意，如果页面上存在多个 svg 标签，则仅选择第一个。如果你不想这样，你也可以按标签 id 选择，比如 d3.select("#my-svg")。d3 对象具有内置的属性和方法，我们将在以后使用它们。

svg.selectAll("circle") 从 <svg> 标签内的所有 <circle></circle> 元素创建一个对象。它可以搜索多个图层，因此标记是直接子图标并不重要。

circles.nodes() 返回带有所有属性的 circle 标签。

如果我们看一下控制台并选择第一个圆圈，我们会看到这样的东西：

https://i.stack.imgur.com/RHt5m.jpg

首先，我们有 attributes，然后是 childNodes，然后是 children，依此类推……但没有数据。

让我们绑定一些数据

但是，如果我们将数据绑定到这些 DOM 元素会发生什么？

在我们的代码中，有一个函数创建一个具有两个属性 x 和 y 的对象，带有数值（此对象在数组中，请检查下面的小提琴）。如果我们将这些数据绑定到圈子……

circles.data(data);

如果我们检查控制台，我们将会看到这一点：

https://i.stack.imgur.com/jnHL4.jpg

我们在 attributes 之前有了新的东西！ 一个名为 __data__ 的东西……看看：x 和 y 的价值就在那里！

例如，我们可以根据这些数据更改圆圈的位置。看看这个小提琴 。

这就是 D3 最擅长的：将数据绑定到 DOM 元素并根据有界数据操作这些 DOM 元素。