Équivalent D3 v4 .rangeBand ()

Question

Dans D3 version 4.x, d3.scale.ordinal() a été changé en d3.scaleOrdinal Et d3.rangeRoundBands A été changé en:

d3.scaleBand()
  .rangeRound([range]);

Pour trouver la largeur d'une bande, quel est l'équivalent de d3.rangeBand()?

Answer 1

Pour trouver la largeur de la bande dans une échelle de bande, vous devez utiliser:

scale.bandwidth();

Selon API , bandwidth():

Renvoie la largeur de chaque bande.

Voici une démo:

var scale = d3.scaleBand()
  .domain(["foo", "bar", "baz", "foobar", "foobaz"])
  .range([0, 100]);
  
console.log("The width of each band is " + scale.bandwidth() + " pixels")

<script src="https://d3js.org/d3.v5.min.js"></script>

Comme vous pouvez le voir, la bande passante dépend du nombre d'éléments dans le domaine, de l'étendue de la plage et des rembourrages. Voici le même extrait ci-dessus, avec des rembourrages:

var scale = d3.scaleBand()
  .domain(["foo", "bar", "baz", "foobar", "foobaz"])
  .range([0, 100])
  .paddingOuter(0.25)
  
console.log("The width of each band is " + scale.bandwidth() + " pixels")

<script src="https://d3js.org/d3.v5.min.js"></script>