Update d3.js scripts from V3 to V4

If like me you recently update d3.js from v3 to v4, you realize that your scripts doesn’t work anymore and you have a lot of undefined error.

edit : You can find all the new syntax for v3 => v4 here : https://github.com/d3/d3/blob/master/CHANGES.md

This is some update exemple from v3 => v4

  • d3.scale.linear() => d3.scaleLinear()
  • d3.svg.arc()          => d3.arc()
  • d3.svg.line()        => d3.line()

So basically d3.scale is now undefined and generally replaced by

  • scale.function => scaleFunction.

You can try the same trick for other undefined function. Look at the variable export at the end of d3.v4.js

and d3.svg is now undefined and generally replaced by  :

  • d3.svg.function() => d3.function()

randRoundBands is move in Band scale

  • d3.scale.ordinal()
    .rangeRoundBands([0, width], .1) => d3.scaleBand().rangeRound([0, width])
  • x.rangeBand() = > x.bandwidth()