Languages
[Edit]
EN

D3 js - Upgrade from version 3 to version 4 with differences - .scaleBand(), .rangeRound(), .padding(), .bandwidth()

10 points
Created by:
AnnLen
9940

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]) · SourceExamples

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]) · SourceExamples

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() · SourceExamples

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
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - friendly IT community for everyone.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join