D3.js v4 - 为条形图设置填充

Question

我正在尝试向 D3.js v4 中的条形图添加填充。

在 v3 中，它是通过以下方式完成的:

var x = d3.scaleOrdinal()
    .domain(["a", "b", "c"])
    .rangeRoundBands([0, width], 0.1);

但是，在 v4 中， rangeRoundBands被淘汰了。我知道 v4 中的等效代码(无填充)是:

var x = d3.scaleBand()
    .domain(["a", "b", "c"])
    .range([0, width]);

根据 this ，我们应该使用 band.padding设置填充。所以我试过这个:

var x = d3.scaleBand()
    .domain(["a", "b", "c"])
    .range([0, width])
    .padding(0.1);

但这似乎并没有产生影响。我究竟做错了什么？

Answer 1

在 D3 V4 中。

这是定义轴的方式:

var x = d3.scaleBand()
    .range([0, width])
    .round(true)
    .padding(.1);//set padding like this
//set the domain like this
x.domain(data.map(function(d) { return d.letter; }));

//define the X axis like this

var xAxis = d3.axisBottom()
    .scale(x);

工作条形图 d3 v4 示例 here