如何获取d3.js中父节点的数据

我正在做嵌套在D3和嵌套元素，我需要达到其父母的数据对象。

现在我正在做

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

有没有更好的办法？

Answer 1

在传递给D3select的函数的上下文中， d3.select(this).node()与这个相同。 你可以像这样重新修改它d3.select(this.parentNode).datum()并返回正确的值，而不必使用丑陋的双下划线属性。

Answer 2

我熟悉的另一种方法是在父对象上使用.each() ，然后在closures中处理子对象：

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

Answer 3

我发现这个职位，当我有完全相同的问题。 我的解决scheme是更改select以传递孩子需要的数据，如果您可以在节点中处理数据冗余，那么我认为这可能是一种有效的方法。

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

为了帮助解释，我已经在一个表的上下文中用了两列。 第一列是title ，第二列是每个accept-language项目。

所以我做了一个分支的languagePathpath的select，并为每个enter呼叫，我会创builda与文本是语言的一个。

所以在这一点上，我也需要link ，以便a元素看起来像：

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

但是link不是传递给这个孩子的数据的一部分，所以当我做select而不是做：

 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 }) }) 

所以，当我在这个select的enter()上处理data时，我确实有父数据。

希望这对你们中的一些人来说是一个有效的select，它对我有帮助。