D3.js 如何为D3中的树布局指定自定义子级和父级属性

如果我将下面的JSON提供给d3，它就会工作

  {
      "name": "Top Level",
      "parent": "null",
      "children": [
        {
            "name": "Level 2: A",
            "parent": "Top Level",
            "children": [
              {
                  "name": "Son of A",
                  "parent": "Level 2: A"
              },
              {
                  "name": "Daughter of A",
                  "parent": "Level 2: A"
              }
            ]
        },
        {
            "name": "Level 2: B",
            "parent": "Top Level"
        }
      ]
  }

但如果我改为跟随它，它就不起作用了。请注意，更改在子项中为大写C，在父项中为P，我使用的不是名称而是DeptCode 所以问题是，有没有一种方法可以指导d3使用json，使用子对象而不是子对象，使用父对象而不是父对象，使用DeptCode而不是名称

编辑：我刚找到。但我不知道该怎么办。有人能详细说明一下吗？

对于给定的数据集

var treeData = [
  {
      "DeptCode": "Top Level",
      "Parent": "null",
      "Children": [
        {
            "DeptCode": "Level 2: A",
            "Parent": "Top Level",
            "Children": [
              {
                  "DeptCode": "Son of A",
                  "Parent": "Level 2: A"
              },
              {
                  "DeptCode": "Daughter of A",
                  "Parent": "Level 2: A"
              }
            ]
        },
        {
            "DeptCode": "Level 2: B",
            "Parent": "Top Level"
        }
      ]
  }
];

以下是连接的方式：

因为数据具有子项而不是默认子项

对于节点上的文本，请执行以下操作：

  nodeEnter.append("text")
      .attr("x", function(d) { return d.children || d._children ? -13 : 13; })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.DeptCode; })//the new label name
      .style("fill-opacity", 1e-6);

对于可折叠节点，请执行以下操作：

// Toggle children on click.
function click(d) {
  if (d.Children) {
    d._children = d.Children;//since the children is stored in Children.
    d.Children = null;
  } else {
    d.Children = d._children;
    d._children = null;
  }
  update(d);
}

工作代码

希望这有帮助

对于给定的数据集

var treeData = [
  {
      "DeptCode": "Top Level",
      "Parent": "null",
      "Children": [
        {
            "DeptCode": "Level 2: A",
            "Parent": "Top Level",
            "Children": [
              {
                  "DeptCode": "Son of A",
                  "Parent": "Level 2: A"
              },
              {
                  "DeptCode": "Daughter of A",
                  "Parent": "Level 2: A"
              }
            ]
        },
        {
            "DeptCode": "Level 2: B",
            "Parent": "Top Level"
        }
      ]
  }
];

以下是连接的方式：

因为数据具有子项而不是默认子项

对于节点上的文本，请执行以下操作：

  nodeEnter.append("text")
      .attr("x", function(d) { return d.children || d._children ? -13 : 13; })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.DeptCode; })//the new label name
      .style("fill-opacity", 1e-6);

对于可折叠节点，请执行以下操作：

// Toggle children on click.
function click(d) {
  if (d.Children) {
    d._children = d.Children;//since the children is stored in Children.
    d.Children = null;
  } else {
    d.Children = d._children;
    d._children = null;
  }
  update(d);
}

工作代码

---

希望这有帮助

这实际上比公认的答案简单得多。您所需要做的就是让d3以正确的方式格式化数据，使用子级而不是子级，使用父级而不是父级。在D3V3中，这是通过d3.layout.hierarchy'完成的，如下所示：

var myJSON = {
  "DeptCode": "Top Level",
  "Parent": "null",
  "Children": [
    {
        "DeptCode": "Level 2: A",
        "Parent": "Top Level",
        "Children": [
          {
              "DeptCode": "Son of A",
              "Parent": "Level 2: A"
          },
          {
              "DeptCode": "Daughter of A",
              "Parent": "Level 2: A"
          }
        ]
    },
    {
        "DeptCode": "Level 2: B",
        "Parent": "Top Level"
    }
  ]
}
var hierarchy = d3.layout.hierarchy()
   .children(function(d) {
       return d.Children;
   });

hierarchy(myJSON);

// use myJSON like you normally would

这将为正确的对象添加子键和父键，现在d3将能够使用json，而无需进行上面建议的额外更改

编辑：

---

工作代码实际上比公认的答案简单得多。您所需要做的就是让d3以正确的方式格式化数据，使用子级而不是子级，使用父级而不是父级。在D3V3中，这是通过d3.layout.hierarchy'完成的，如下所示：

var myJSON = {
  "DeptCode": "Top Level",
  "Parent": "null",
  "Children": [
    {
        "DeptCode": "Level 2: A",
        "Parent": "Top Level",
        "Children": [
          {
              "DeptCode": "Son of A",
              "Parent": "Level 2: A"
          },
          {
              "DeptCode": "Daughter of A",
              "Parent": "Level 2: A"
          }
        ]
    },
    {
        "DeptCode": "Level 2: B",
        "Parent": "Top Level"
    }
  ]
}
var hierarchy = d3.layout.hierarchy()
   .children(function(d) {
       return d.Children;
   });

hierarchy(myJSON);

// use myJSON like you normally would

这将为正确的对象添加子键和父键，现在d3将能够使用json，而无需进行上面建议的额外更改

编辑：

---

工作代码

哇，谢谢。这很简单。顺便问一下，d.(U)子项中的下划线代表什么？单击节点时，单击的节点d.子项将移动到d.(U)子项，而d.子项将变为null。这样做是为了使节点不会显示为展开。反之亦然，当你再次点击它。哇，谢谢你。这很简单。顺便问一下，d.(U)子项中的下划线代表什么？单击节点时，单击的节点d.子项将移动到d.(U)子项，而d.子项将变为null。这样做是为了使节点不会显示为展开。如果再次单击，则反之亦然。