Learn D3.js

Using join() for updates

In this example, we can't just replace enter-append-merge for join(), since the enter selection appends two child elements, so an enter function is passed as the first argument. It's no longer necessary to save references for intermediate selections, and everything fits in a single selection chain:

// 3) Moons: general update pattern with joinplane.selectAll("g.moon")    .data(current.moons)    .join(enter => enter.append("g")                        .each(function() {                            d3.select(this).append("circle");                            d3.select(this).append("text");                        })    )    .attr("class", "moon")    .attr("transform", d => `translate(${[d.cx,0]})`)    .each(function() {        const moon = d3.select(this);        moon.select("circle").attr("r", d => scale(d.diameterKm)/2); moon.select("text").text(d ...