D3.js Quick Start Guide

Adding paths for each pie segment

Let's add path elements for each element in our dataset. Add the following code to the bottom of app.js:

var path = d3.select('g').selectAll('path')
    .data(dataset)
    .enter()
    .append('path')
    .attr('fill', function(d) {
        return colorScale(d.label);
    });

If we examine our elements in the developer tools, we'll see that the paths were added, and each path has a fill value, as determined by colorScale(d.label), which is mapping the label of each data object to a color: