15

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"
    },
.
.
VividD
  • 10,456
  • 6
  • 64
  • 111
DrTim
  • 203
  • 1
  • 4
  • 7

3 Answers3

7

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();
}
Amit Rana
  • 1,117
  • 1
  • 10
  • 32
4

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

jfelectron
  • 1,033
  • 9
  • 6
3

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/

Marinus
  • 2,210
  • 2
  • 15
  • 15
  • Yes, exactly ... one uses the d3 'links' to connect parents and children. The other has explicit 'links' between the nodes across hierarchies (whether they are parents or children themselves). – DrTim Apr 10 '13 at 14:42
  • I haven't attempted to merge to two, have you? – Marinus Apr 11 '13 at 14:32
  • no. There are several examples of one-level grouped graphs as per the link above, and the "Hierarchical Edge Bundling" sample - http://mbostock.github.io/d3/talk/20111116/bundle.html - uses a similar data structure (but only leaf nodes can be connected). Still no luck with a solution ... – DrTim Apr 11 '13 at 14:40