如何从 this example 制作行 var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
使用 d3.scaleBand 在 d3 v4 中工作?
最佳答案
在 D3 4.x 中,ordinal.rangeRoundBands 已替换为 band.rangeRound(因此,不再有 rangeRoundBands
)。除此之外……
The new band.padding, band.paddingInner and band.paddingOuter methods replace the optional arguments to 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())
关于javascript - d3.scaleBand 是如何工作的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38539508/