試圖瞭解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提琴：

http://jsfiddle.net/p2v3B/

D3的文檔 - https://github.com/mbostock/d3/wiki/Selections#wiki-data - 建議selection.data（）「加入指定的數據數組wi目前的選擇「，但是這個測試似乎表明它沒有加入任何東西，而是完全取代它。

即。有兩個div，然後在做data（）之後只有一個？

Answer 1

連接的工作方式是它試圖將給定的數據與現有元素相匹配。如果只給出一個數據項，它最多可以匹配一個。在你的情況下，2與第一個存在的元素相匹配（因爲默認情況下d3基於數組中的索引匹配），另一個div是.exit()選擇的一部分。

意圖是在更新顯示的數據時使用此功能。以前，有兩個數據項目，現在只有一個。將以某種方式更新的那個，而另一個將被刪除。

如果您還沒有這樣做，我建議看看three little circles tutorial，它更詳細地解釋和說明了這些概念。