Javascript 水平d3树：如何让根从左上角开始，而不是从中间的y轴开始？

实际上我有一些关于这棵树的问题，但我会分别问

我有一个树（），这显然是一个股票d3水平树的大部分，除了一个小的工具提示我附加到子节点

问题是，如何让树从容器的左上角展开，而不是从y轴的中间向外辐射？换言之，我想以这样的方式结束：

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

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

---

我一直在研究x和y是如何在这里工作的，但我似乎不知道如何改变这一点。

您可以通过在

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;
});

---

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

请在这里找到github链接。

---

你看到了吗？是的；这和我的例子不一样吗？它仍然从y轴的中心开始。哦，对了，对不起，误解了你的意图。我想你可以简单地取根节点的y坐标，减去一半高度作为一个常量偏移量。这似乎也不起作用。谢谢你的主意，谢谢你。不过，就是这样，在这种情况下，我不知道如何获取“兄弟姐妹”。@stephenhay，嗯，我只是用一个代码更新了我的答案，帮助获取兄弟姐妹值。虽然这可能不是计算效率最高的解决方案，但它确实完成了任务！希望这会有帮助。这非常接近我所需要的，你肯定为我指明了正确的方向。此外，您的代码注释有助于理解您的策略。谢谢伟大的希望这至少是朝着这个方向迈出的一步——没问题。

nodes.forEach(function(d,i) {
                              d.x = d.numberAfterPeriod * 40 + 20;
                              d.y = d.depth * 180;
                            });