D3.js條形圖 - 使用自定義條寬度對齊標籤

Question

我正在嘗試創建一個條形圖來顯示動態數據，這意味着在加載時可能會有1-10條之間的任何位置。默認情況下，標籤正確對齊每個欄的中心。但是，對於我的條形圖，我需要縮短每個小節的寬度。

我試圖改變的代碼下面的行：

height = 200 - margin.top - margin.bottom; 

這成功地減少了條的寬度，但通過減小圖形的總體尺寸這樣做。

此外，我試過下面的代碼改變高度屬性：

svg.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
    .attr("class", "bar") 
    .attr("width", function(d) {return x(d.value); }) 
    .attr("y", function(d) { return y(d.label); }) 
    .attr("height", y.bandwidth()) 

這成功地調整大小的酒吧，但移動標籤了allignment的。

任何人都可以幫助我讓標籤在自定義寬度時自動重新對齊到酒吧的中心嗎？我附加了一個鏈接到一個JSFiddle來幫助可視化我的問題。

JSFiddle

Answer 1

的padding就在那裏，使用它：

var y = d3.scaleBand() 
    .range([height, 0]) 
    .padding(0.4);//tweak this value here 

這是你更新的小提琴，0.4填充：https://jsfiddle.net/xLfdft2f/