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.

References

1. https://github.com/d3/d3-scale#scaleBand
2. https://github.com/d3/d3-scale#band_rangeRound
3. https://github.com/d3/d3-scale#band_bandwidth
4. https://devdocs.io/d3~3/
5. https://devdocs.io/d3~4/
6. https://d3js.org/
7. D3.js - wikipedia