D3 v4 .rangeBand（）等效 [英] D3 v4 .rangeBand() equivalent

问题描述

在D3版本4.x中， d3.scale.ordinal（）已更改为 d3.scaleOrdinal 和 d3.rangeRoundBands 已更改为：

In D3 version 4.x, d3.scale.ordinal() has been changed to d3.scaleOrdinal and d3.rangeRoundBands has been changed to:

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

要查找波段的宽度，相当于 d3。 rangeBand（）？

To find the width of a band, what is the equivalent of d3.rangeBand()?

推荐答案

要在乐队比例中找到乐队的宽度，你必须使用：

To find the width of the band in a band scale you have to use:

scale.bandwidth();

根据 API ， bandwidth（）：

返回每个波段的宽度。

Returns the width of each band.

这是一个演示：

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>

如您所见，带宽取决于域中元素的数量，范围的范围和填充物。以上是相同的片段，带有填充：

As you can see, the bandwidth depends on the number of elements in the domain, the extent of the range and the paddings. Here is the same snippet above, with paddings:

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>

这篇关于D3 v4 .rangeBand（）等效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！