2016-02-01 56 views
3

選擇。如果我的HTML是D3的ID parentNode

<html> 
<script src="d3.min.js" type="text/JavaScript"></script> 
<body> 
    <div id="borderdiv">meh</div> 
</body> 
<script type="text/JavaScript">console.log((d3.select("#borderdiv")[0]));</script> 
</html> 

和我d3.select("#borderdiv"),如果結果有parentNode爲bodyhtml?我希望前者能得到後者。

請注意,實際上我並不想要parentNode:相反,這是一個我發現意外的行爲的最小情況。我想知道這是否是d3中的錯誤。

回答

1

d3.js selections,每個選擇是陣列陣列元素,其中所述子陣列

有附加的方法[綁定]到所述陣列的,這樣就可以應用運營商所選擇的元素。

因此d3.select("#borderdiv")[0]陣列(與parentNode由d3.js到DOM根置位),而不是一個節點本身。

你想要的是

d3.select("#borderdiv")[0][0].parentNode

編輯:

the docs來自:

分組由全選也影響隨後的進入佔位符的節點。因此,爲了進入附加節點時,指定的父節點,使用select其次selectAll

d3.select("#borderdiv") 
    .selectAll("#borderdiv") 
    .data("ipsum dolor sit amet".split(" ")) 
    .enter() 
    .append("div"); 
+0

非常感謝。上面的代碼實際上被最小化以試圖理解行爲。我真正想要做的是設置data(),然後輸入()。append()節點,但根據我如何做select,附加節點最終在主體之後而不是在div之後。我想知道這是錯誤還是功能。例如。將腳本改爲 '' –

+0

我編輯了原帖。再次感謝您的答覆。 –

+0

可以說這不是一個bug,它是d3'select'語句的返回值的函數。有關如何在追加時指定父節點的示例,請參閱上面的我的編輯。 – rphv

1

其實更好的辦法是不要介意D3在這裏。它更簡單,更清潔,如果你只是用純javascript編寫它:

document.getElementById('borderdiv').parentNode(); 
0

有趣的問題,讓我分享我的答案。

如果你真的對直接的父節點感興趣(在你的案例body),這裏是一個免費的方式來獲取它。

var parent = d3.select("#borderdiv").select(function(){ 
    return this.parentNode; 
}) 

我有點過敏使用數組索引這些東西。所以我更喜歡使用這種方法。

+0

@rphv非常感謝 –