Upgrading d3 from v3 to v4

July 31, 2016


We recently upgraded to d3js  v4.1.0. Here is what we did to fix the breaking changes:

After the upgrade our data visualizations stopped being generated, and on a closer look we were getting this js error in Chrome:

Uncaught TypeError: Cannot read property 'format' of undefined

It turns out  d3js  v4.1.0 is a major rewrite with several breaking changes, so be prepared to spend half a day looking at it. Fortunately the d3.js documentation is very comprehensive, including the documented changes  - which is a must read.

Here are the Firefox errors we fixed to get it working again:

TypeError: d3.time is undefined

  • fix: d3.time.format => d3.timeFormat
  • fix: d3.time.scale => d3.scaleTime
  • fix: d3.time.months => d3.timeMonths
  • fix: d3.time.hours => d3.timeHours
  • fix: d3.time.days => d3.timeDays
  • fix: d3.time.year => d3.timeYear

TypeError: d3.time.format(…).parse is not a function

  • fix: => d3.timeParse( “%Y-%m-%d %H:%M:%S” );

TypeError: d3.scale is undefined

  • fix: d3.scale.linear() => d3.scaleLinear()

TypeError: d3.svg is undefined

  • fix: var xAxis = d3.svg.axis() => var xAxis = d3.axisBottom()
  • fix: var yAxis = d3.svg.axis() => var yAxis = d3.axisLeft()
  • fix: var yAxisPercent = d3.svg.axis() => var yAxisPercent = d3.axisLeft()
  • fix: d3.svg.line() => d3.line()
  • fix: d3.svg.area() => d3.area()

TypeError: d3.axisBottom(…).innerTickSize is not a function

  • fix: innerTickSize => tickSizeInner
  • fix: outerTickSize => tickSizeOuter

TypeError: d3.axisLeft(…).ticks(…).tickSizeInner(…).tickSizeOuter(…).tickSubdivide is not a function

  • fix: remove .tickSubdivide(true)

TypeError: interval.every is not a function

  • fix: remove .tick…

TypeError: d3.line(…).interpolate is not a function

  • fix: .interpolate(‘monotone’) => .curve(d3.curveMonotoneX)

© 2018 Keith P | Follow on Twitter | Git