D3.js: Merge

2 June 2018

If you’re having trouble understanding D3’s merge command, you are certainly not alone. There are hundreds of very similar questions on Stackoverflow. It does take some time to understand D3’s data binding, and the best way to learn it is to play with it.

New elements are added in green. Existing elements are colored orange.

constcanvas=d3.select("#canvas");functionupdate(data){// Select all existing circles. The first time this runs, there will not be// anything to select, but that's not a problem.letcircles=canvas.selectAll("circle").data(data);// Set the class to "update" for all existing circles.circles.attr("class","update");// The enter() command will add all new circles with the class "enter". The// merge() command will transition any existing circles.circles.enter().append("circle").attr("class","enter").attr("cx",d=>xPos(d.index,data.length)).attr("cy",height/2.0).attr("r",d=>d.radius).merge(circles).transition().attr("cx",d=>xPos(d.index,data.length)).attr("r",d=>d.radius);// Remove any circles that need to be removed.circles.exit().remove();}