D3.js Quick Start Guide

Removing parts of the pie

We want to make it possible to click on a section of the pie to remove it. First, let's add IDs to our data, to make the removal easier. Adjust the var dataset code at the top of app.js:

var dataset = [
    { id: 1, label: 'Bob', count: 10 }, //add id property
    { id: 2, label: 'Sally', count: 20 }, //add id property
    { id: 3, label: 'Matt', count: 30 }, //add id property
    { id: 4, label: 'Jane', count: 40 } //add id property
];

Now, let's use those IDs when we map data to paths. Adjust the .data() portion of our var path =d3.select('g').selectAll('path')code at the bottom of app.js, as follows:

var path = d3.select('g').selectAll('path')
    .data(pie(dataset), function(datum){ //attach datum.data.id to each element
        return ...