Question

有许多力导向图和可折叠树图的例子，但我在力导向图中找不到可折叠特征。实际上我想在有界力导向图中实现可折叠特征。两者都有不同的json数据文件，因此非常混乱。在我的情况下，我必须绘制具有可折叠特征的拓扑图，并且只需要实现有界力导向图。

我的json数据文件结构

{
"nodes": [
    {
        "id": 1,
        "name": "switch1",
        "children": [
            {
                "name": "port-1"
            },
            {
                "name": "port-2"
            }
        ]
    },
    {
        "id": 2,
        "name": "switch1"
    },
    {
        "id": 3,
        "name": "switch1"
    }
],
"links": [
    {
        "source": 1,
        "target": 2,
        "value": 5
    },
    .
    .
    .
]

}

这里，交换机可以与其他交换机建立多个连接，以便可以在力导向图中表示。但是如果特定交换机下有端口，那么交换机可能包含我想要折叠的端口。

Answer 1

OK基于你的小提琴这里是一个使用示例代码的工作小提琴 http://bl.ocks.org/mbostock/1062288

小提琴在这里：http://jsfiddle.net/robschmuecker/AA7LZ/

您对JSON的更改如下：

JSON

var json = {
     "nodes": {
         name: 'RootNode',
         children: [{
             "switch_id": 1,
                 "name": "switch1",
                 "children": [{
                 "name": "port-1"
             }, {
                 "name": "port-2"
             }]
         }, {
             "switch_id": 2,
                 "name": "switch2"
         }, {
             "switch_id": 3,
                 "name": "switch3"
         }]
     },
         "links": [{
         "source": 1,
             "target": 2,
             "value": 5
     }]
 };

您可以看到id字段已更改为switch_id，因为它与示例代码发生冲突（您也可以将示例代码中对id的引用更改为如果你无法控制你的JSON，那么其他的东西我已经为此添加了RootNode以便正常工作。由于JSON中没有size个属性，因此节点的大小都相同。

我也直接为root引用了JSON而不是使用D3的JSON函数，如下所示：

JAVASCRIPT：

 /*d3.json("readme.json", function(json) {
  root = json;
  update();
});*/

 // Now get at the nodes you want displayed
 root = json.nodes;
 update();

如何在有界力导向图中合并可折叠特征？

1 个答案: