D3 v4 .rangeBand() equivalent

D3 v4 .rangeBand() equivalent

本文关键字：equivalent rangeBand v4 D3      更新时间：2023-09-26

在D3版本4。x, d3.scale.ordinal()已更改为d3.scaleOrdinal, d3.rangeRoundBands已更改为:

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

要求带的宽度，d3.rangeBand()的等价物是什么?

要在频带比例中查找频带的宽度，您必须使用:

scale.bandwidth();

根据API, bandwidth():

返回每个频带的宽度。

下面是一个示例:

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>

正如您所看到的，带宽取决于域中元素的数量、范围的范围和填充。下面是与上面相同的代码片段，使用了padding:

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>

相关文章：