如何使用 d3 及其强制布局构建树？答案

【问题标题】：How can I construct a tree using d3 and its force layout?如何使用 d3 及其强制布局构建树？
【发布时间】：2023-04-06 22:43:01
【问题描述】：

我正在尝试以树的形式排列我的节点。目前，我正在处理来自here 的这个示例。目前，我依赖于强制导向布局，但我正在尝试修改它，以便我可以获得具有预定数量级别的树，即如果一个节点属于特定的“层”，它应该属于与其他节点相同的区域层。

我试图在下面的图片中解释更多，但有人对此有什么建议吗？ d3 内部是否有任何预先确定的算法可以执行此操作或可以进行调整以实现此操作？

【问题讨论】：

源代码包含动态树的示例。你应该看看它，它可能是你想要的（至少它看起来很相似）。 编辑： 我的意思是this example。
您在这里使用强制导向布局而不是静态树布局是否有原因，例如bl.ocks.org/1061834 ?
@nrabinowitz：+1 谢谢。不敢相信我错过了！我想两者都会达到我的目的！有没有一种方法可以让它们交互，这样当我将它们拖到某个地方时节点就会回来？这有助于拖动一些节点并向某人解释。
@FelixKling：+1 谢谢。我在上面写了一个额外的问题。

【解决方案1】：

您的图表看起来几乎与this example 相同，后者使用基于深度的自定义重力。有another example 使用吸引到父节点的自定义力。这些都来自my talk 的强制布局。

当然，强制布局只是一种选择——正如@nrabinowitz 所说，还有更多hierarchy layouts。你可以在我的 SVG Open talk 中找到 more interactive hierarchy examples。

【讨论】：