D3 v4 .rangeBand()等效
收藏

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]);

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

最佳答案

要在带刻度中找到带的宽度,您必须使用:

scale.bandwidth();

According to the 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>

如您所见,带宽取决于域中元素的数量,范围的范围和填充。这是与上面相同的代码片段,带有填充:

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>

    公众号
    关注公众号订阅更多技术干货!