D3 v4 .rangeBand（）等效

Question

在D3版本4.x中，d3.scale.ordinal()已更改为d3.scaleOrdinal且d3.rangeRoundBands已更改为：

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

要查找波段的宽度，相当于d3.rangeBand()？

Answer 1

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

scale.bandwidth();

根据API，bandwidth()：

  

返回每个波段的宽度。

这是一个演示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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")

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;