D3.js - join()

Just as you thought you'd got to grips with the .merge() function, it changes again in D3.js version 5.

There is no crisis here, .merge() works perfectly in version 5 as well but it's always good to embrace change!

.join() is designed as a

more convenient and memorable API for joining data without sacrificing anything

There is a brilliant explanation of how it works when you're appending data to a single element by Mike Bostock - no need to expand there.

This article is a quick extension to show how you can append data to a group which can then be applied to multiple elements.

In this article I explain the process with the .merge() functionality.

The good news is that using .join() instead is less lines of code as well as all the extra potential to highlight data elements which are current and new.

So the update_group function in the original demo:

       //join
       var my_group = svg.selectAll('.chart_group')
                         .data(data, d => d.id);
       //exit and remove
       my_group.exit().remove();
       //enter new groups
       var enter = my_group.enter()
                           .append("g")
                           .attr("class","chart_group");

       //append elements to new group
       enter.append("rect").attr("class","group_rect");
       enter.append("text").attr("class","group_text");
       enter.append("image").attr("class","group_image");

       //merge 
       my_group = my_group.merge(enter);

becomes this in the new demo

//join
 var my_group = svg.selectAll('.chart_group')
                   .data(data, d => d.id)
                   .join(function(group){
                    var enter = group.append("g").attr("class","chart_group");
                            enter.append("rect").attr("class","group_rect");
                            enter.append("text").attr("class","group_text");
                            enter.append("image").attr("class","group_image");
                            return enter;
                    });

What could be easier! Thanks again to the wonder of Mr Bostock.