Блог

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

Как вы можете видеть, пропускная способность зависит от количества элементов в домене, размера диапазона и отступов. Вот тот же фрагмент выше, с дополнениями:

 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>