爲什麼d3的select（）和selectAll（）在這裏表現不同？

我在玩drag multiples example，我注意到一些我無法解釋的東西。爲什麼d3的select（）和selectAll（）在這裏表現不同？

在這個片斷：

var svg = d3.select("body").selectAll("svg") 
    .data(d3.range(16).map(function() { return {x: width/2, y: height/2}; })) 
    .enter().append("svg") 
    .attr("width", width) 
    .attr("height", height);

我改變selectAll到select。它仍然有效，但現在svg元素後</body>標籤添加。原始代碼與selectAll一樣，將它們添加到<body>標籤後面，就像您期望的那樣。

由於原始html不包含硬編碼<svg>元素，我認爲select和selectAll只是返回空選擇。所以我無法弄清楚他們爲什麼會導致不同的行爲。

我只是在尋找解釋。謝謝！

來源

2013-01-06 Jonah

嗯，這沒有任何意義，選擇* *一個元素，如果你真的想對付多的。所以我認爲使用'.select' +'.data'不應該是有效的用例。 '.select'似乎創建了一個選擇，其中'parentNode'爲''（HTML根節點）和'.selectAll'選擇''（在'.select（'body'）'之後）。將元素附加到'html'似乎不是預期的行爲，但它可能是故意的。我會問作者，這也可能是一個錯誤。 –

回覆：您關於select的用例的有效性的觀點，我的理解是select和selectAll都返回一個選擇對象，這是一種集合。恰恰恰巧，select所返回的集合碰巧只有一個元素（或者是空的）。所以在兩種情況下應用data（）都是有效的。如果理解錯誤，請糾正我的錯誤 – Jonah

.select應只抓取與標識符匹配的第一個元素，它不應該與selectAll不同。我會把它作爲Github上的一個bug發佈。 – Elijah

檢查邁克·博斯托克的關於選擇/全選後：Nested Selections

引述：

有選擇和全選的一個重要區別：選擇保留現有的分組，而全選創建一個新的分組。調用select從而保留了原始選擇的數據，索引，甚至是父節點！

來源

2013-01-30 20:02:03

select和selectAll之間的基本區別是選擇壓扁現有選擇的層次結構，而selectAll保留它。

因此，當您使用一個selectAll在另一個之後時，結果將非常類似嵌套for循環的列表。

http://bost.ocks.org/mike/nest/

來源

2015-02-07 22:36:16

爲什麼d3的select（）和selectAll（）在這裏表現不同？

回答

相關問題