d3.js - 如何在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，第二列具有。aaccept-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()选择时，我确实有父母的数据。

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