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

Question

在以下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 
    },
    ...
 ]

Answer 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。