使用 D3.js 的层次力图
Posted
技术标签:
【中文标题】使用 D3.js 的层次力图【英文标题】:Hierarchical force diagram using D3.js 【发布时间】:2012-09-24 12:59:24 【问题描述】:我想使用 D3.js 生成一个层次力图 - 一个力导向图,它允许您通过单击将图扩展到子级的节点来导航树状结构(子级之间的关系是如图所示)。节点可以通过两种方式相互关联,父节点或兄弟节点。父关系表明节点“属于”它们的父节点。
作为起点,我查看了 force cluster 示例:https://github.com/mbostock/d3/blob/master/examples/force/force-cluster.html,并包含了上面的关系,但我无法弄清楚如何只渲染扩展的集群而不是整个网络(见下图)。
JSON data:
"nodes":
[
"name":"Person 0","group":"Person 0",
"name":"Person 1","group":"Person 1",
"name":"Person 2","group":"Person 1",
"name":"Person 3","group":"Person 1",
"name":"Person 4","group":"Person 3",
"name":"Person 5","group":"Person 3"
],
"links":
[
"source":1,"target":0,"type":"sibling",
"source":2,"target":1,"type":"parent",
"source":3,"target":1,"type":"parent",
"source":3,"target":2,"type":"sibling",
"source":4,"target":3,"type":"parent",
"source":5,"target":3,"type":"parent",
"source":4,"target":5,"type":"sibling"
]
上图:力图,红色链接表示兄弟关系。
也可以在 JSON 中将“孩子”排列为孩子,而不是使用父“类型”:
"nodes": [
"name": "Person 0",
,
"name": "Person 1",
"children": [
"name": "Person 2",
,
.
.
.
"links": [
"source": 1,
"target": 0
,
.
.
但是,如何在跟踪子节点之间的关系的同时结合树结构?
一个富有想象力的树状结构如下所示:
下半部分表示所需的视觉布局(类似于上图中的功能)。
您对如何进行有什么建议吗?
【问题讨论】:
我遇到了类似的问题。我想显示从大型数据集中单击的节点周围的本地网络。我的解决方案可能会为您提供一些建议:timebandit.github.io/graphSub 【参考方案1】:隐含地,具有相同直接父节点的所有节点都是兄弟节点。因此,您应该不需要额外跟踪节点是否是彼此的兄弟节点。
如果您碰巧有仅与其他兄弟节点相关但没有父节点的节点(例如您示例中的 Person 0 和 Person 1 之间的关系),则树布局不是正确的选择。相反,您可能想尝试强制布局。
【讨论】:
以上是关于使用 D3.js 的层次力图的主要内容,如果未能解决你的问题,请参考以下文章
D3.js 和 Knockout Force Diagram API 更新