javascript - D3 Tree Layout - 当 child 超过一定数量时自定义垂直布局

Question

我正在尝试使用 D3 Tree Layout 创建某种类型的家谱，我注意到的一件事是当我有很多子节点时，它会在屏幕上水平拉伸(stretch)。理想情况下，我希望这些节点的布局更加垂直，这样人们就不必在屏幕上滚动，只需继续向下看树即可。

这是我目前看到的:

现在可能没那么糟糕，但如果我说有 20 个 child ，它就会横跨整个屏幕，这是我想要避免的事情。

我见过类似 this 的问题但这对我没有帮助，因为我想要一个特定的布局，而不仅仅是调整大小......我有大节点，如果我尝试动态调整树的大小，它们就会开始相互碰撞——缩小树对我没有用有什么好处我特别需要针对 child 数量超过一定数量的情况采用不同的布局。

这就是我的设想/希望。请注意，根节点不会生成此格式，因为它只有 4 个子节点。理想情况下，我希望这样，如果 parent 有 5 个或更多 child ，就会产生下面的布局。如果根节点有 5 个子节点，就会出现这种布局，如果用户想看到根节点的孙节点(A、B、C... 节点)，布局应该简单地垂直展开。如有必要，我可以得到一张图表:

我找到了一个 semi-similar question regarding custom children layouts他说他必须尝试实际的 d3js 代码。我有点想避免这种情况，所以我希望找出 d3js 是否有可能像现在这样，如果可以，该如何去做？我不需要完整的答案，但证明这是可能的代码片段会非常有帮助。

如有必要，我可以上传一个 JSFiddle 供人们试用。

Answer 1

看看这个 fiddle :

http://jsfiddle.net/dyXzu/

我从 http://bl.ocks.org/mbostock/4339083 中获取了示例代码并做了一些修改。请注意，在示例中，绘制时 x 和 y 会切换，因此布局显示为垂直树。

我做的重要事情是修改深度计算器:

原文:

// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });

固定:

// Normalize for fixed-depth.
nodes.forEach(function (d) {
    d.y = d.depth * 180;
    if (d.parent != null) {
        d.x =  d.parent.x - (d.parent.children.length-1)*30/2
        + (d.parent.children.indexOf(d))*30;
    }
    // if the node has too many children, go in and fix their positions to two columns.
    if (d.children != null && d.children.length > 4) {
        d.children.forEach(function (d, i) {
            d.y = (d.depth * 180 + i % 2 * 100);
            d.x =  d.parent.x - (d.parent.children.length-1)*30/4
            + (d.parent.children.indexOf(d))*30/2 - i % 2 * 15;
        });
    }
});

基本上，我手动计算每个节点的位置，覆盖 d3 的默认节点定位。请注意，现在 x 没有自动缩放。您可以通过首先遍历并计算打开的节点(如果存在 d.children 则不为 null，d._children 在关闭时存储节点)，然后将总数 x 相加来手动解决这个问题。

两列布局中带有子节点的节点看起来有点古怪，但改变画线方法应该会有所改善。