web-dev-qa-db-ja.com

D3 v4 .rangeBand（）と同等

D3バージョン4.xでは、d3.scale.ordinal()が_d3.scaleOrdinal_に変更され、_d3.rangeRoundBands_が次のように変更されました。

_d3.scaleBand()
  .rangeRound([range]);
_

バンドの幅を見つけるには、d3.rangeBand()と同等のものは何ですか？

javascriptd3.jssvg
28
cpd

バンドスケールでバンドの幅を見つけるには、使用する必要があります。

_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>_

ご覧のとおり、帯域幅は、ドメイン内の要素の数、範囲の範囲、およびパディングに依存します。これは上記と同じスニペットで、パディングがあります：

_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>_
50
Gerardo Furtado