在 d3.js 中将节点和链接转换为分层树

Posted 2023-02-22

【中文标题】在 d3.js 中将节点和链接转换为分层树

【英文标题】：Converting nodes and links to hierarchical tree in d3.js

【发布时间】：2012-12-03 22:34:23

【问题描述】：

我有一个 JSON 表示一个图形（在我的例子中也是一个树），看起来像这样：

"directed": true, "graph": [], 
"nodes": ["time": 4, "id": 4551308, "name": "Alto da Boa Vista", "time": 7, "id": 4551309, "name": "Sumare",
...
"links": ["source": 0, "target": 36, "weight": 1, 
"source": 1, "target": 36, "weight": 1,
...

为了使用它来构建像本例中的树 http://mbostock.github.com/d3/talk/20111116/force-collapsible.html，我需要将此 JSON 转换为分层对象，其中子节点嵌套在父节点中，如下所示：https://github.com/mbostock/d3/wiki/Tree-Layout#wiki-tree。

D3 是否有一些内置函数可以将图形转换为树？ 或者您将如何从图形生成嵌套树 JSON 对象？

我在这个 jsFiddle 中有示例：http://jsfiddle.net/fccoelho/bFT8K/8/

【问题讨论】：

您能找到解决方案吗？我希望将我已经准备好的 nodes 和 links json 数组转换为分层格式的 json，而无需重新编写完整的 json 生成代码。

【参考方案1】：

好的，这是一个两部分的答案。

第 1 部分： D3 确实具有将数组转换为嵌套结构的内置功能。看看 d3.nest() 函数

API 文档：https://github.com/d3/d3/blob/master/API.md#nests

这主要用于分层布局：Cluster、Pack、Partition、Treemap

第 2 部分： 如果您尝试实现类似于您发布的示例的布局，那么您不需要对您的数据做任何事情。该示例使用需要图形的强制布局。由于力布局可以处理任何形状的图形，而树只是一个遵循一些约束的图形，因此您不需要进行任何转换。如果图表的形状恰好是一棵树，那么它看起来就像一棵树。

这应该足够好了：

force
  .nodes(spread.nodes)
  .links(spread.links)
  .start();

【讨论】：

使用强制我可以获得 x,y 位置，但它看起来不像树，因为所有节点都是随机出现的，我需要将它们设置为树或某种排列方式

请将文档链接更新为github.com/d3/d3/blob/master/API.md#nests