Collapse/expand child nodes of tree in d3.js?

d3.js hierarchy force-layout
wataraptor picture wataraptor · Mar 2, 2012 · Viewed 18.8k times · Source

I'm building a tree structure (or rather modifying one of the examples with a set of my own data in my own json) and I'm trying to create some functionality:

My tree's layout is that from the tree example: http://mbostock.github.com/d3/ex/cluster.html

I am adding (to the circles) an onclick event which I would like to collapse the children of the clicked node. That is to say, when a user clicks the steelblue circle associated with a node, I want that nodes children to disappear.

I've scoured the documentation and I haven't turned up anything which would allow me to make nodes collapse or disappear.

What could I do?

Answer

mbostock picture mbostock · Mar 3, 2012

There's this:

http://mbostock.github.com/d3/talk/20111018/tree.html

There are a number of other interactive hierarchical layout examples from my SVG Open keynote.

Related questions

how to encode this data to parent / children structure in JSON

I am working with d3.js to visualise families of animals (organisms) (up to 4000 at a time) as a tree graph, though the data source could just as well be a directory listing, or list of namespaced objects. my data …

Read More
Use d3 log scale instead of linear scale

I'm trying to do a chart based on http://mbostock.github.com/d3/talk/20111116/bar-hierarchy.html, the only difference being that I'd like to use a log scale for the x-axis. Here's my fiddle: http://jsfiddle.net/JhDVC/5/ As you …

Read More
Tree drawing orientation

I've made a slightly modified tree using the tree layout. I needed to orient the tree right-to-left instead of the regular left-to-right orientation that's the default. What is the right and proper d3:ish way to do this? I ended …

Read More