Updating your chart

Updating your d3 chart used to be a bit confusing for most people.

The data pattern takes some time to understand properly and when I teach d3 courses people always got trip up on it.

But d3 version 5 just made it a whole lot easier to use and understand.

There is a new method: join And with it we don’t need to use enter and exit directly anymore. These were the methods with the most confusion.

But you still can use them. You pass them to the join method to have more fine grain control.

Let‘s take a look at how it works.

Before:

circles = d3.select('svg').selectAll('circle').data([1,2,3,4])
circles.enter().append('circle')
circles.exit().remove()
circles.merge().attr('r', (d) => d)

After

circles = d3.select('svg').selectAll('circle').data([1,2,3,4])
circles.join('circle').attr('r', (d) => d)

What? Pretty great, right? That means less boilerplate code. I used to write the enter, append, exit, remove code a lot of times. So it‘s great that this is now gone. The join method will call append and remove internally.

But what if you want to animate the remove? You still can. It‘s just a little different:

circles = d3.select('svg').selectAll('circle').data([1,2,3,4])
circles.join(
  enter =>   
    enter.append('circle').attr('fill', 'green'),   
  exit => exit.attr('fill', 'brown').call(
    exit =>   
      exit.transition(svg.transition().duration(750))
    .remove()
    )
)

This looks a little crazy. But is kinda genius. The uses-cases for these animations and changes are rare, so most people will benefit greatly from this change and the others just need to learn a little bit different syntax.

Written by Mila

See Also

Bubble Map Radius

Small tip for your bubble maps.

Default Projection Paramameters

What are the default projection params in d3.js

Promises error

Small tip when you hit a async error

d3 events tips

Small tip for selecting the active element for events

shorthand functions

Small tip for writing less boilerplate