d3.scaleBand 是如何工作的？
Posted
技术标签:
【中文标题】d3.scaleBand 是如何工作的？【英文标题】：How does the d3.scaleBand work? 【发布时间】：2016-11-27 03:04:59 【问题描述】：如何使用d3.scaleBand 使this example 中的var x = d3.scale.ordinal().rangeRoundBands([0, width], .05); 行在d3 v4 中工作？
【问题讨论】：
【参考方案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())
【讨论】：
以上是关于d3.scaleBand 是如何工作的？的主要内容，如果未能解决你的问题，请参考以下文章