Question

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

在第3版中，它按以下方式完成：

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

但是，在第4版中，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

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

1 个答案: