将边列表转换为d3中的嵌套树结构答案

【问题标题】：Turn list of edges into nested tree structure in d3将边列表转换为d3中的嵌套树结构
【发布时间】：2020-10-09 20:39:06
【问题描述】：

我有一个构建树的边缘列表的列表：

[
    {'start': 'A', 'end': 'B'},
    {'start': 'B', 'end': 'C'},
    {'start': 'B', 'end': 'D'},
    {'start': 'D', 'end': 'E'},
    {'start': 'D', 'end': 'F'},
    {'start': 'D', 'end': 'G'},
]

我使用递归函数将数据转换为嵌套的 from：

{
    'name': 'A',
    'children': [
        {
            'name': 'B',
            'children': [
                {
                    'name': 'C',
                    'children': []
                },
                {
                    'name': 'D',
                    'children': [
                        {
                            'name': 'E',
                            'children': []
                        },
                        {
                            'name': 'F',
                            'children': []
                        },
                        {
                            'name': 'G',
                            'children': []
                        },
                    ]
                }
            ]
        }
    ]
}

我想问一下 d3js 是否已经内置了可以达到相同结果的东西？

【问题讨论】：

标签： javascript d3.js graph

【解决方案1】：

试试d3.stratifyᵈᵒᶜˢ，它需要一个父子关系列表并创建一个可以传递给 d3.tree 或其他任何东西的层次结构。

使用您的数据数组，包含具有属性start（父）和end（子）的对象，您可以使用：

  var root = d3.stratify()
    .id(function(d) { return d.end; })
    .parentId(function(d) { return d.start; })(dataArray)

有一点需要注意，你需要一个没有parent的item，这会成为root：“对于根节点，parent id应该是undefined。（Null和空字符串等价于undefined）”@987654322 @。所以在你的情况下，我们仍然需要在你的数据数组中添加一个项目：{'start': '', 'end': 'A'}。

var data = [
    {'start': '', 'end': 'A'},
    {'start': 'A', 'end': 'B'},
    {'start': 'B', 'end': 'C'},
    {'start': 'B', 'end': 'D'},
    {'start': 'D', 'end': 'E'},
    {'start': 'D', 'end': 'F'},
    {'start': 'D', 'end': 'G'},
]


var root = d3.stratify()
    .id(function(d) { return d.end; })
    .parentId(function(d) { return d.start; })
    (data);
    
console.log(root);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"&gt;&lt;/script&gt;

sn-p 的控制台在这种情况下很差，使用浏览器控制台正确查看返回的层次结构。返回的数据结构与您的问题相同，但添加了节点深度、节点数据等属性

【讨论】：