如何在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第二列,第二列具有a每个accept-language项目.

所以我做了一个子选择的分裂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()本次评选中我有父母的资料.

希望这对你们中的一些人来说是一个有效的选择,它确实帮助了我.