试图理解D3的selection.data()是有效的

时间:2013-04-10 04:03:24

标签: javascript d3.js

我有我的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);

我的小提琴:

http://jsfiddle.net/p2v3B/

D3的文档 - https://github.com/mbostock/d3/wiki/Selections#wiki-data - 建议selection.data()“使用当前选择加入指定的数据数组”但是这个测试似乎表明它不会加入任何东西,而是更换掉它。 / p>

即。有两个div然后在做data()之后只有一个?

1 个答案:

答案 0 :(得分:2)

连接的工作方式是尝试将给定数据与现有元素进行匹配。如果只提供一个数据项,则最多只能匹配一个。在您的情况下,2与第一个现有元素匹配(因为默认情况下d3基于数组中的索引匹配),而另一个div.exit()选择的一部分。 / p>

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

如果您还没有这样做,我建议您查看three little circles tutorial,它会更详细地解释和说明这些概念。