Question

我正在尝试理解正确的用法来实现我的可折叠树d3但无法建立正确的父/子引用因为我不能使用“父”。试图使用parentID。

这是我正在测试的数据集：

    var result = [
      { "id": 1, "name": "Top Level", "parent": null, "parentId": "" },
      { "id": 2, "name": "PROD", "parent": "Top Level", "parentId": 1 },
      { "id": 3, "name": "QAT", "parent": "Top Level", "parentId": 1 },
      { "id": 4, "name": "App1", "parent": "PROD", "parentId": 2 },
      { "id": 5, "name": "App1", "parent": "QAT", "parentId": 3 },
      { "id": 6, "name": "ServerPROD001", "parent": "App1", "parentId": 4 },
      { "id": 7, "name": "ServerQAT001", "parent": "App1", "parentId": 5 }
    ];

并基于可折叠树：

        // convert the flat data into a hierarchy 
        var treeData = d3.stratify()
          .id(function (d) { return d.name; })
          .parentId(function (d) { return d.parent })
          (result);

如果我不包含第6项和第7项，这样可以正常工作。如果我确实包含这些，我会得到一个歧义错误，这是有道理的，因为它无法确定要关联的“App1”。

我尝试更改代码以使用parentId，但现在只是出现“missing：1”错误。

        // convert the flat data into a hierarchy 
        var treeData = d3.stratify()
          .id(function (d) { return d.name; })
          .parentId(function (d) { return d.parentId })
          (result);

注意 - 我无法将“App1”名称值更改为唯一的名称，因为它们将存在于具有该名称的多个区域中。

Answer 1

由于您的ID是唯一的，而不是名称：

// convert the flat data into a hierarchy 
var treeData = d3.stratify()
          .id(function (d) { return d.id; }) // return the id instead of the name
          .parentId(function (d) { return d.parentId })
          (result);

然后设置您需要显示的名称：

// assign the name to each node as the initial name
treeData.each(function(d) {
    d.name = d.data.name;
  });

基于here，可以找到this的工作示例 :)

祝你好运！

使用d3.js v4 - 使用parentId解决歧义

1 个答案: