O'Reilly logo

D3.js Quick Start Guide by Matthew Huntington

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

Removing data

Let's set up a click handler on all <circle> elements so that when the user clicks on <circle>, D3 will remove that circle and its associated data element from the array. Add the following code at the bottom of the render function declaration we wrote in the last section. We do this so that the click handlers are attached after the circles are created:

//put this at the bottom of the render function, //so that click handlers are attached when the circle is created
d3.selectAll('circle').on('click', function(datum, index){    //stop click event from propagating to     //the SVG element and creating a run
    d3.event.stopPropagation();     //create a new array that has removed the run  //with the correct id. Set it to the runs var runs  ...

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