我正在尝试使用 D3 树布局来创建各种家谱,我注意到的一件事是,当我有很多子节点时,它会在屏幕上水平伸展。理想情况下,我希望这些节点的布局更加垂直,这样人们就不必在屏幕上滚动,而可以继续向下看树。
这是我目前看到的:
现在可能没那么糟糕,但如果我说 20 个孩子,它会跨越整个屏幕,这是我想要避免的事情。
我见过这样的问题,但这对我没有帮助,因为我想要一个特定的布局,而不仅仅是调整大小......我有大节点,如果我尝试动态调整树的大小,它们就会开始相互碰撞——缩小这棵树对我没有任何好处。对于有超过一定数量的孩子的情况,我特别需要不同的布局。
这是我所设想/希望的。请注意,根不会生成这种格式,因为它只有 4 个子级。理想情况下,我想要这样,如果父母有 5 个或更多孩子,它会导致下面的布局。如果根有 5 个子节点,则将产生这种布局,如果用户想要查看根的孙子节点(A、B、C... 节点),布局应该简单地垂直拉伸。如有必要,我可以得到一张图表:
我发现了一个关于自定义子布局的半相似问题,他说他必须使用实际的 d3js 代码。我有点想避免这种情况,所以我希望找出现在的 d3js 是否可行,如果可以,该怎么做?我不需要完整的答案,但证明这是可能的代码片段会非常有帮助。
如有必要,我可以上传一个 JSFiddle 供人们玩耍。