标签：javascript html5 tree d3-js 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/中有一个例子

解决方法:

好的,这是一个2部分的答案.

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

> API文档：https://github.com/mbostock/d3/wiki/Arrays#wiki-d3_nest

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

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

这应该足够好了：

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

标签：javascript,html5,tree,d3-js,force-layout
来源： https://codeday.me/bug/20190704/1372423.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。