Javascript d3.scaleBand 是如何工作的？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38539508/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How does the d3.scaleBand work?
提问by Nafis
How can I make the line var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);from this examplework in d3 v4 using d3.scaleBand?
我怎样才能使线条var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);从这个例子中使用D3 V4工作d3.scaleBand？
回答by Gerardo Furtado
in D3 4.x, ordinal.rangeRoundBands has been replaced with band.rangeRound (thus, there is no more rangeRoundBands). Besides that...
在 D3 4.x 中，序号.rangeRoundBands 已被替换为带.rangeRound （因此，没有更多rangeRoundBands）。除此之外...
The new band.padding, band.paddingInner and band.paddingOuter methods replace the optional arguments to ordinal.rangeBands.
新的band.padding、band.paddingInner 和band.paddingOuter 方法替换了 ordinal.rangeBands 的可选参数。
So, that 0.05goes to paddingInner. This is how the line looks in D3 v4.x:
所以，0.05这就到了paddingInner。这是该行在 D3 v4.x 中的外观：
d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.05);
I have rewritten the code in your example, updated to D3 v4.x: https://plnkr.co/edit/HQz1BL9SECFIsQ5bG8qb?p=preview
我已经重写了您示例中的代码，更新为 D3 v4.x：https://plnkr.co/edit/HQz1BL9SECFIsQ5bG8qb ?p =preview
Necessary changes:
必要的改变：
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);- for the bars:
.attr("width", x.bandwidth())
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())
