d3.js 中的可折叠/分层和力导向图答案

【问题标题】：Collapsible/hierarchical AND force-directed graph in d3.jsd3.js 中的可折叠/分层和力导向图
【发布时间】：2013-04-02 09:38:50
【问题描述】：

有很多力导向图（即节点和链接）和可折叠树（即父子节点）的例子，但我找不到这些组合的例子——除了像这样的一些 1 级集群网络- http://static.cybercommons.org/js/d3/examples/force/force-cluster.html.

也就是说，我需要一个完整的节点层次结构（具有任意数量的级别），并在整个层次结构的各个节点之间建立链接。

有人有这方面的例子吗？

如果是这样，我最终希望看到层次结构是可折叠的，并且子级的任何链接在折叠时都会“提升”到父级。

干杯，蒂姆

这类似于我期望 jsonData 的样子...

{
"nodes": [
    {
        "name": "Parent 1",
        "children": [
            {
                "name": "Child 1",
            },
    },
    {
        "name": "Parent 2",
        "children": [
            {
                "name": "Child 2",
            },
.
.
.
"links": [
    {
        source: "Child 1",
        target: "Child 2"
    },
.
.

【问题讨论】：

标签： d3.js force-layout

【解决方案1】：

我尝试将这两个示例合并到我的fiddle

// Toggle children on click.
function click(d) {
if (d.children) {
    d._children = d.children;
    d.children = null;
} else {
    d.children = d._children;
    d._children = null;
}
update();
}

【讨论】：

【解决方案2】：

这是一个很好的例子，展示了http://bl.ocks.org/mbostock/1093130这两个属性

【讨论】：

它没有显示两个属性。它只显示可折叠的属性。

【解决方案3】：

我也对此感兴趣。我找到了两个例子，我想把它们结合起来。

http://bl.ocks.org/mbostock/1062288 http://graus.nu/d3/

【讨论】：

是的，正是……使用 d3 'links' 连接父母和孩子。另一个在层次结构的节点之间有明确的“链接”（无论他们是父母还是孩子自己）。
我没有尝试合并到两个，是吗？
没有。根据上面的链接，有几个一级分组图的示例，“分层边缘捆绑”示例 - mbostock.github.io/d3/talk/20111116/bundle.html - 使用类似的数据结构（但只能连接叶节点）。仍然没有解决方案......