使用D3.js的分层力图

时间:2012-10-03 14:58:35

标签: javascript d3.js hierarchy force-layout

我想使用D3.js生成一个分层力图 - 一个力导向图,它允许您通过点击将图形扩展到子级别的节点来导航树状结构(其中儿童之间的关系是示出)。节点可以通过两种方式相互关联,父节点或兄弟节点。父关系表示节点“属于”其父节点。

作为一个起点,我查看了强制集群示例: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"}
        ]
}

Expanding cluster

上图:强制图,红色链接表示兄弟关系。

也可以将“children”作为子句安排在JSON中,而不是使用父“type”:

{
"nodes": [
    {
        "name": "Person 0",
    },
    {
        "name": "Person 1",
        "children": [
            {
                "name": "Person 2",
            },
            {
.
.
.
"links": [
    {
        "source": 1,
        "target": 0
    },
.
.

但是,如何在跟踪子节点之间的关系的同时组合树结构?

富有想象力的树状结构如下所示: Tree

下半部分表示所需的视觉布局(与上图中的功能类似)。

您对如何进行有任何建议吗?

1 个答案:

答案 0 :(得分:0)

隐含地,具有相同直接父级的所有节点都是兄弟节点。因此,您无需另外跟踪节点是否是彼此的兄弟节点。

如果您碰巧只有与其他兄弟节点相关但没有父节点的节点(例如示例中Person 0和Person 1之间的关系),则树布局不是正确的选择。相反,您可能想尝试强制布局。