CODEWITHSUNDEEP
d3.jsforce-layout
DrTim
DrTim

Reputation: 203

Collapsible/hierarchical AND force-directed graph in d3.js

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.

enter image description here

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"
    },
.
.

Upvotes: 15

Views: 13060

Answers (3)

jfelectron
jfelectron

Reputation: 1033

Here is a nice example that exhibits both properties http://bl.ocks.org/mbostock/1093130

Upvotes: 4

Amit Rana
Amit Rana

Reputation: 1117

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

Upvotes: 7

Marinus
Marinus

Reputation: 2200

I'm also interested in this. I have found two examples, that I'd like to combine.

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

Upvotes: 3

Related Questions