将边缘列表转换为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是否已经内置了可以实现相同结果的功能？

- ooo

Answer 1

试试使用 d3.stratifyᵈᵒᶜˢ，它将父子关系列表转换成层次结构，可以传递给 d3.tree 或其他函数。

如果你的数据数组包含具有属性 start（父节点）和 end（子节点）的对象，则可以使用以下代码：

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

需要翻译的内容如下:

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

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

- Andrew Reid