试图理解d3的select .data()的工作原理

Trying to understand D3's selection.data() works

本文关键字：工作 data select d3      更新时间：2023-09-26

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

My js fiddle:

http://jsfiddle.net/p2v3B/

D3的文档- https://github.com/mbostock/d3/wiki/Selections#wiki-data -建议select .data()"将指定的数据数组与当前选择连接起来"，但是这个测试似乎表明它没有连接任何东西，而是直接替换它。

ie。这里有两个div，然后在做data()之后只有一个?

连接的工作方式是尝试将给定的数据与现有元素相匹配。如果只给出一个数据项，它最多只能匹配一个。在您的示例中，2由第一个现有元素匹配(因为默认情况下d3根据数组内的索引匹配)，而另一个div是.exit()选择的一部分。

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

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

相关文章：