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