d3.js中的可折叠/分层和强制有向图 [英] Collapsible/hierarchical AND force-directed graph in d3.js

问题描述

有很多强制图（即节点和链接）和可折叠树（即父子节点）的例子，但我不能找到这些组合的一个例子 - 除了一些1级聚类网络 -

  //切换儿童点击。 
 function click（d）{
 if（d.children）{
 d._children = d.children; 
 d.children = null; 
} else {
 d.children = d._children; 
 d._children = null; 
} 
 update（）; 
} 
  

There are numerous examples of force-directed graphs (i.e. nodes and links) and collapsible trees (i.e. parent-child nodes) but I cant find an example of the combination of these - other than some 1-level clustered networks like this - http://static.cybercommons.org/js/d3/examples/force/force-cluster.html.

That is I need a full hierarchy of nodes (with any number of levels) with links between various nodes across the hierarchy.

Has anyone got an example of this?

And if so I'd ultimately like to see the hierarchies be collapsible and any of the links from the children are 'elevated' up to the parent when it is collapsed.

Cheers, Tim

This is similar to what I'd expect the jsonData to look like ...

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

解决方案

i try to merge both examples here my 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();
}

这篇关于d3.js中的可折叠/分层和强制有向图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！