javascript - 如何在D3中定义父子关系？

在以下json文件中，id是ID号，lv是级别，而pid是此记录的父ID号。如何建立父子节点关系以在D3.js中绘制分区？

我已经通过d3.json和data.map函数将json文件转换为数组。

 [
    {
       "id": 1,
      "nam": "Ph",
      "lv": 1,
      "pid": 0
    },
    {
      "id":2,
      "nam":"Pa",
      "lv1":2,
      "pid":1
    },
    ...
 ]

最佳答案

要定义父子关系，您需要d3.stratify()。

因此，根据您的数据结构，分层功能应为：

var stratify = d3.stratify()
    .id(function(d) { return d.id; })
    .parentId(function(d) { return d.pid; });

该函数非常易于使用：在id中设置每个节点的ID，在parentId中设置每个节点的父ID（在您的情况下，分别为id和pid）。

查看此演示：

var data =  [{"id": 1, "nam": "Ph", "lv": 1, "pid": ""},
    {"id":2, "nam":"Pa", "lv1":2, "pid":1},
		{"id":3, "nam":"Foo", "lv1":2, "pid":1},
		{"id":4, "nam":"Bar", "lv1":3, "pid":2}];

var stratify = d3.stratify()
    .id(function(d) { return d.id; })
    .parentId(function(d) { return d.pid; });

var root = stratify(data);

console.log(root);

<script src="https://d3js.org/d3.v4.min.js"></script>

PS：根节点没有父节点。因此，删除根对象的0中的pid。

关于javascript - 如何在D3中定义父子关系？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41474518/