Question

我无法制作Nested selctions的头部或尾部，或者至少根据我的需要调整信息。

我这里有一些JSON数据，其格式如下：

{
  'name': 'root'
  'children': [
    {
      'name': 'child1'
    },
    {
      'name': 'child2'
    }
  ]
}

我需要在根节点中显示子数据。让我们假设我有这样的事情：

nodeEnter.append("text")
      .text(d.name)

所以此时我的事件处理程序是来自root的数据。如何从那里访问子对象的数据，以便上面的代码显示“root（child1，child2）”之类的内容？

Answer 1

你可以试试这个：

var childNames = d.children.map(function(child) {
  return child.name;
});

nodeEnter
  .append("text")
  .text(d.name + ' (' + childNames.join(', ') + ')');

Answer 2

显示您想要的内容的代码将是这样的（使用嵌套选择）。

var top = d3.selectAll("div").data(data).enter().append("div");
top.append("div").text(function(d) { return d.name; });
// nested selection here
top.selectAll("div.child").data(function(d) { return d.children; })
   .enter().append("div").attr("class", "child")
   .text(function(d) { return d.name; });

Jsfiddle here。

从父级访问嵌套数据

2 个答案: