javascript - 将边列表转换为 d3 中的嵌套树结构

Question

我有一个构造树的边列表列表:

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

我使用递归函数将数据转换为嵌套:

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

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

Answer 1

试试 d3.stratify ᵈᵒᶜˢ ，它需要一个父子关系列表，并创建一个可以传递给 d3.tree 或其他任何东西的层次结构。
使用您的数据数组，包含具有属性的对象 start ( parent )和 end ( child )，你可以使用:

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

需要注意的一件事，你需要一个没有父级的项，这将成为根:“对于根节点，父ID应该是未定义的。(空和空字符串等效于未定义)” ᵈᵒᶜˢ .所以在你的情况下，我们仍然需要向你的数据数组添加一个项目: {'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);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

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