如何在d3 v4中使用d3.scaleBand使来自这个例子的代码行var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
工作?
如何在d3 v4中使用d3.scaleBand使来自这个例子的代码行var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
工作?
在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())