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:
And with it we don’t need to use
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.
circles = d3.select('svg').selectAll('circle').data([1,2,3,4]) circles.enter().append('circle') circles.exit().remove() circles.merge().attr('r', (d) => d)
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
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.
Small tip for your bubble maps.
What are the default projection params in d3.js
Small tip when you hit a async error
Small tip for selecting the active element for events
Small tip for writing less boilerplate