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

Question

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

Answer 1

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