Как работает d3.scaleBand?

Как я могу сделать строку var x = d3.scale.ordinal().rangeRoundBands([0, width], .05); из этот пример работать в d3 v4 с помощью d3.scaleBand?

ОТВЕТЫ

Ответ 1

в D3 4.x, ordinal.rangeRoundBands заменен на band.rangeRound(таким образом, больше нет rangeRoundBands). Кроме того...

Новые методы band.padding, band.paddingInner и band.paddingOuter заменяют необязательные аргументы на ordinal.rangeBands.

Итак, 0.05 переходит в paddingInner. Так выглядит строка в D3 v4.x:

d3.scaleBand()
    .rangeRound([0, width])
    .paddingInner(0.05);

Я переписал код в вашем примере, обновленный до D3 v4.x: https://plnkr.co/edit/HQz1BL9SECFIsQ5bG8qb?p=preview

Необходимые изменения:

  • var parseDate = d3.timeParse("%Y-%m");
  • var x = d3.scaleBand().rangeRound([0, width]).paddingInner(0.05);
  • var y = d3.scaleLinear().range([height, 0]);
  • var xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat("%Y-%m"));
  • var yAxis = d3.axisLeft(y).ticks(10);
  • для столбцов: .attr("width", x.bandwidth())