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

时间:2012-12-16 17:43:09

标签: javascript html5 d3.js tree force-layout

我有一个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 objetc?

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

1 个答案:

答案 0 :(得分:2)

好的,这是2部分答案。

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

这主要用于分层布局:群集,包,分区,树图

第2部分: 如果您尝试实现类似于您发布的示例的布局,则无需对数据执行任何操作。该示例使用需要图形的力布局。由于力布局可以处理任何形状的图形,而树只是一个遵循一些约束的图形,因此您无需进行任何转换。如果图形的形状恰好是树,它看起来就像一棵树。

这应该足够好了:

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