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