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

Rendering the lines, nodes, and text elements

We draw the tree in the update() function. Since this function is a bit large, we'll split it up for this discussion:

function update() {      tree(currentRoot);      // add the lines     ...      // add the nodes     ...      // add the circles     ...      // add the text elements     ... }

The first thing we do is enrich our data by calling the tree() function. This sets the x and y coordinates and adds the descendants function. Now let's first add the lines that connect the nodes with each other:

var links = chart.selectAll(".link")     .data(currentRoot.descendants().slice(1));  var linksEnter = links.enter().append("path")     .attr("class", "link")     .style("stroke", function(d) {return colorScale(d.data.group)}); 

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