填充不做條形圖

Question

我正在做一個柱狀圖，但我想酒吧不是太接近彼此的差異。

這是我如何定義我的X比例：

let echelleX = d3.scaleBand() 
     .domain(setMots) 
     .range([0, setMots.length * largeurBarre]) 
     .padding(.1); 

這裏是圖我得到：

如果我現在有一個更高的填充定義我的規模：

let echelleX = d3.scaleBand() 
     .domain(setMots) 
     .range([0, setMots.length * largeurBarre]) 
     .padding(.5); 

下面是我得到的圖表：

正如你所看到的，只有外部填充改變了。根據d3 API，我沒有做錯什麼，所以我沒有看到我的錯誤在哪裏。我環顧了一下StackOverflow，發現this fiddle，其中更改padding值有效地修改了條之間的差距。我錯過了什麼？

Answer 1

與您的代碼的問題是，您指定的酒吧寬度的硬編碼值，而不是從D3依賴於動態計算值的事實。

只需更新指定你的酒吧的寬度採取考慮到您已經使用echelleX.bandwidth()的手段之前指定的填充值的行：

barre.enter() 
    .append("rect") 
    .attr("class", d => d.mot) 
    .attr("x", (d, i) => echelleX(d.mot)) 
    .attr("y", (d) => echelleY(d.freq)) 
    .attr("width", echelleX.bandwidth()) // <--- this one 
    .attr("height", d => height - echelleY(d.freq)) 
    .attr("fill", "#ffcc99"); 

下面是一個與更新工作fiddle 。