Question

如果我将以下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 hildren中的CAPITAL C ， p 中的 P 不是 name < / strong>我有 DeptCode 所以问题是有没有办法指示d3与json一起使用 C hildren而不是 c hildren， P 不是< strong> p 不是和 DeptCode 而不是名称？

  {
      "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"
        }
      ]
  }

编辑：我刚发现this。但我无法破译该怎么做。有人可以详细说明吗？

Answer 1

对于给定的数据集

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"
        }
      ]
  }
];

这是你如何连线的：

由于数据包含儿童而非默认儿童。

var tree = d3.layout.tree()
    .size([height, width])
    .children(function(d){return d.Children;});//this will provide children.

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

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

工作代码here

希望这有帮助！

Answer 2

这实际上比接受的答案简单得多。您需要做的就是让d3以正确的方式格式化您的数据（使用children代替Children和parent而不是Parent。在d3 v3中，这是完成的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

这会将children和parent个键添加到正确的对象中，现在d3将能够使用您的json而无需进行上述建议的额外更改。

编辑：工作代码here

如何在D3

2 个答案: