javascript - 试图理解 D3 的 selection.data() 作品

Question

我的 HTML 是这样的：

<div>1</div>
<div>10</div>

我的 JS：

divs = d3.select("body").selectAll("div");
alert(divs[0].length);

divs = divs.data([2]);
alert(divs[0].length);

我的 js 小提琴：

D3 的文档 - https://github.com/mbostock/d3/wiki/Selections#wiki-data - 建议 selection.data() “将指定的数据数组与当前选择加入”但是这个测试似乎表明它是不加入任何东西，而是完全替换它。

IE。有两个 div 然后在做 data() 之后只有一个？

score 2 · Accepted Answer

连接的工作方式是尝试将给定数据与现有元素进行匹配。如果你只给一个数据项，它最多可以匹配一个。在您的情况下，2与第一个现有元素匹配（因为默认情况下 d3 匹配基于数组中的索引），另一个div是.exit()选择的一部分。

目的是在更新显示的数据时使用它。以前有两个数据项，现在只有一个。一个将以某种方式更新，而另一个将被删除。

如果您还没有这样做，我建议您查看三个小圆圈教程，该教程更详细地解释和说明了这些概念。

1 回答 1