lookout.devlookout.dev
search
Share Knowledge
00

d3 prefer join over enter, exit or merge

Friday, October 30, 2020

Since d3 v4 it has been possible to use selection.join() which aims to simplify data binding in d3.

With join you no longer need to manually call .merge, .enter or .exit on selections. You can still access enter, exit and update selections within the join function if needed.

Instructions

checkmark-circle
 Do

selection.join("rect")

error-circle
 Avoid

selection.enter().append("rect"), selection.exit().remove()

info-circle
 Why

It keeps code simpler and you can still access enter, update and exit selections within join function if required

Code Examples

Using join

let items = d3.select('svg')
    .selectAll('rect')
    .data(data);

items.join('rect');

Using enter

let selection = d3.select('svg').data(data);
    
let newItems = selection.enter();
newItems.append('rect');// update new items

let exitingItems = selection.exit();
Tom Eustace

Reformed Java developer specializing in frontend technologies, mostly Angular (Nx), Svelte, Vue and D3.

Meet Tom Eustace

Have a question or comment?