d3.scaleBand如何工作？

Question

如何使用this example在d3 v4中使d3.scaleBand的var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);行工作？

Answer 1

在D3 4.x中，序数 .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())