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

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();