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

Question

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

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

是否有人有这方面的示例呢？

如果有的话，我最终希望看到这些层次可以折叠，并且在折叠时来自子项的任何链接会“上移”到父项的位置。

谢谢， Tim

这与我的jsonData预期相似...

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

- DrTim

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

- Amit Rana

Answer 2

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

- jfelectron

---

它没有显示两个属性，只显示可折叠属性。 - Jaydipsinh

Answer 3

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

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

- Marinus

---

是的，确切地说...一个使用d3的“链接”来连接父节点和子节点。另一个在层次结构之间具有显式的“链接”，无论它们自己是父节点还是子节点。 - DrTim

我还没有尝试合并这两个，你呢？ - Marinus

以上链接中有几个单层分组图的示例，而“分层边捆绑”示例 - http://mbostock.github.io/d3/talk/20111116/bundle.html - 使用类似的数据结构（但只能连接叶节点）。仍然没有找到解决方案... - DrTim