我正在尝试使用D3 Tree Layout来创建各种各样的家谱,我注意到的一件事是,当我有很多子节点时,它会在屏幕上水平伸展.理想情况下,我希望这些节点有一个更垂直的布局,这样人们就不必在屏幕上滚动,只能继续向下看树.
这是我目前看到的：
现在它可能不是那么糟糕,但如果我说了20个孩子,它将跨越整个屏幕,这是我有点想避免的.
我已经看过像this这样的问题,但这对我没有帮助,因为我想要一个特定的布局,而不仅仅是调整大小……我有大节点,如果我试图动态调整树的大小,它们会开始相互碰撞 – 收缩这棵树对我没有好处.对于有超过一定数量的孩子的情况,我特别需要不同的布局.
这是我想象/希望的那种.请注意,root不会生成此格式,因为它只有4个子节点.理想情况下,我想要它,如果父母有5个或更多的孩子,它将导致下面的布局.如果根有5个子节点,则会导致这种布局,如果用户想要查看根的孙子节点(A,B,C ……节点),布局应该只是垂直伸展.如果有必要,我可以得到一个图表：
我找到了semi-similar question regarding custom children layouts,他说他必须使用实际的d3js代码.我有点想避免这种情况,所以我希望能够找到d3js是否可行,因为它现在就是这样,如果是这样,怎么去呢？我不需要一个完整的答案,但是一段代码证明这是可能的,这将是非常有帮助的.
如果有必要,我可以上传一个JSFiddle供人们玩.
我从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如果存在则不为空,d._children在关闭时存储节点),然后将总x加起来.
具有两列布局中的子项的节点看起来有点时髦,但更改线条绘制方法应该可以改进.
