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

Question

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

在第3版中,它以下列方式完成:

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

根据这个,我们应该使用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样本在这里