O'Reilly logo

Expert Data Visualization by Jos Dirksen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Animating hiding a node

The first thing we need to do is add a listener that will listen to clicks on the node we want to collapse:

var nodesEnter = nodes.enter().append("g")     .attr("class", "node")     .on("click", click);  function click(d) {     if (d.children) {         d._children = d.children;         d.children = null;          // highlight the selected circle         d3.select(this).select("circle").style("stroke", "red");         d3.select(this).select("circle").style("stroke-width", "2");     } else {         d.children = d._children;         d._children = null;          // reset the highlight         d3.select(this).select("circle").style("r", 2.5);         d3.select(this).select("circle").style("stroke", "");     }     update(); }

Here we use the on function to define a listener for click events. When clicked ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required