Languages
[Edit]
EN

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

10 points
Created by:
AnnLen
1795

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
Hey 👋
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.