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:
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)