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

我试图在D3.js v4中为条形图添加填充

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

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

然而，在v4中，

rangeRoundBands

被消除。我知道v4中的等效代码（无填充）是：

根据，我们应该使用

band.padding

来设置填充。所以我试了一下：

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

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

在D3V4中

以下是定义轴的方式：

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示例

谢谢！我想关键是设置

圆形（true）

，这是我的代码中缺少的。谢谢这也是我的离合器。

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);