javascript - “叶对齐” D3树形图？

我需要怎么做才能使树图呈现出来，从而使节点朝图的叶侧对齐？

我想拍摄一个通常看起来像这样的任意树形图：



并使其类似于：

最佳答案

一种实现方法是发现树的深度，并将没有任何子节点的每个节点的depth属性设置为该值。

假设您的树数据如下：

var data = [
    {
        "name": "Top Level",
        "parent": "null",
        "children": [
            {
                "name": "Level 2: A",
                "parent": "Top Level",
                "children": [ ...

您使用以下方法创建了一棵树：

var tree = d3.layout.tree();

您可以通过在每个节点上搜索depth的最大值来获取树的depth：

var treeDepth = d3.max(tree(data[0]), function(d) { return d.depth; });

一旦有了它，就可以在每次重新计算树布局时将其重置：

tree.nodes(data[0]).forEach(function(d) {
    var depthSize = 50;
    if (!d.children) { // this node has no children
        d.depth = treeDepth; // set depth to depth of tree
    }
    d.y = d.depth * depthSize; // recalculate y
});

这适用于示例中从左到右排列的树木。对于自上而下的布局，必须改为更改d.x。

这是一个JSFiddle，其工作方案是根据this example改编的。

关于javascript - “叶对齐” D3树形图？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38314582/