3

我实际上对这棵树有几个问题，但我会分开问。

我有一个树（demo/code），它显然是大部分的库存 d3 水平树，除了我附加到子节点的一个小工具提示。

问题是，我怎样才能让树从容器的左上角展开，而不是从 y 轴的中间向外辐射？换句话说，我想结束这个：

START-----Parent 1-----Child 1
                  \
                   `---Child 2

等等，其中 START 位于 SVG 容器的左上角。注意：子节点应该因此向下和向右扩展。

我一直在研究 x 和 y 如何在这里工作，但我似乎无法弄清楚如何改变它。

4

2 回答 2

2

您可以通过修改 x 值来实现该效果

nodes.forEach(function(d) { d.x = /*yourValues*/; d.y = d.depth * 180; });

正如您可能已经意识到的那样，您的特定问题的真正关键是为每个节点提供一个与其级别（即兄弟节点）相关的值。由于您提供的示例已经为depth每个节点提供了一个值，您始终可以遍历节点并计算这些值，最终产生一个数组，如：

node0 has 0 nodes before it in the same depth (depth 0)
node1 has 0 nodes before it in the same depth (depth 1)
node2 has 1 nodes before it in the same depth (depth 1)

更新forEach您可以通过将上面的代码替换为以下代码来找到兄弟值并达到预期的效果：

nodes.forEach(function(d) { //iterate through the nodes
    if(d.parent != null){ //if the node has a parent
        for(var i = 0; i < d.parent.children.length; i++){ //check parent children
            if(d.parent.children[i].name == d.name){ //find current node
                d.downset = i; //index is how far node must be moved down
            }
        }
        d.parentDownset = d.parent.downset; //must also account for parent downset
    }
    if(d.downset == null){ d.downset = 0; }
    if(d.parentDownset == null){ d.parentDownset = 0; }
    d.x = (d.downset * 40) + (d.parentDownset * 40) + 20;
    d.y = d.depth * 180;
});

此外，通过示例中孩子的命名方式，您可以解析出后面的数字.

取出1，Child 1.1否则0返回Child 1和Child 2

nodes.forEach(function(d,i) {
                              d.x = d.numberAfterPeriod * 40 + 20;
                              d.y = d.depth * 180;
                            });
于 2013-10-03T17:05:33.683 回答
0

我使用 Angualr 创建了这个，D3js 缩进的树根从左上角开始。它可能对未来有用。

D3js缩进树根从左上角开始

请在此处找到 github 链接。 https://github.com/AnandanSelvaganesan/angular-d3-tree

于 2020-05-21T22:44:25.357 回答