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

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

好的，根据您的小提琴，这里是一个使用示例代码的工作小提琴 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();