D3 js - Upgrade from version 3 to version 4 with differences - .scaleBand(), .rangeRound(), .padding(), .bandwidth()
When we upgrade d3.js from v3 to v4 our codebase can break. So I've decided to share some points that may be useful in upgrade.
1. Useful differences between updage from D3.js v3 to D3.js v4
v3 .scale.ordinal() is replaced with v4 .scaleBand()
v3 .rangeRoundBands() is replaced with v4 .rangeRound() and .padding()
v3 .bands.rangeband() is replaced with v4 .bands.bandwidth()
2. D3.js v4 documentation:
# d3.scaleBand([[domain, ]range]) · Source, Examples
Constructs a new band scale with the specified domain and range, no padding, no rounding and center alignment. If domain is not specified, it defaults to the empty domain. If range is not specified, it defaults to the unit range [0, 1].
# band.rangeRound([range]) · Source, Examples
Sets the scale’s range to the specified two-element array of numbers while also enabling rounding. This is a convenience method equivalent to:
band
.range(range)
.round(true);
Rounding is sometimes useful for avoiding antialiasing artifacts, though also consider the shape-rendering “crispEdges” styles.
# band.bandwidth() · Source, Examples
Returns the width of each band.