如何獲取父節點的數據在d3.js

Question

我正在做嵌套在D3和嵌套元素，我需要達到它的父母的數據對象。

現在我做

d3.select(this).node().parentNode.__data__; 

有沒有更好的辦法？

Answer 1

d3.select(this).node()是一樣的只是this在函數傳遞的上下文到D3選擇。您可以像這樣將其重寫爲d3.select(this.parentNode).datum()，並且無需使用醜陋的雙下劃線屬性即可獲取正確的值。

Answer 2

另一種方法是我所熟悉的是對父母使用.each()，然後關閉內的兒童打交道：

d3.selectAll('.parent').each(function(parentDatum) { 
    d3.select(this).selectAll('.child').each(function(childDatum) { 
     // do stuff with parentDatum and childDatum here 
    }); 
}); 

Answer 3

我發現這個職位，當我有完全相同的問題。我的解決方案是改變選擇以傳遞我在孩子需要的數據，如果您可以接受節點中的數據冗餘，我認爲這可能是一種有效的方法。

[ 
    { 
    title: "Google", 
    link: "www.google.com", 
    languagePath : "en,fr,it" 
    }, 

    ... 
] 

爲了有助於解釋，我已經在一個表的上下文中使用了這個函數，它有兩列。第一列爲title，第二列爲accept-language項目中的每一個都有a。

所以我做了languagePath的拆分和每個enter調用的子選擇，我會創建一個a，文本是語言。

所以在這一點上，我還需要link，使a元素，看起來像：

<a href="www.google.com/en">EN</a> 
<a href="www.google.com/fr">FR</a> 

但link是不會傳遞到這個孩子的數據的一部分，所以當我做了選擇，而不是的做：

var langLinks = tableRow 
    .append("td") 
    .selectAll("span") 
    .data(function(d) { 
     return d.languagePath.split(",") 
     }) 

我做

var langLinks = tableRow 
    .append("td") 
    .selectAll("span") 
    .data(function(d) { 
     return d.languagePath.split(",").map(function(item) { 
       return { 
        lang : item, 
        link : d.link 
       }) 
     }) 

所以，當我在處理data這個選擇enter()我有父母的數據。

希望這對你們中的一些人來說是一個有效的選擇，它的確幫助了我。