D3.js棒グラフ - ラベルをカスタムバーの幅に合わせる

Question

私は、動的データを表示する棒グラフを作成しようとしています。つまり、読み込み時に1〜10の棒が存在する可能性があります。デフォルトでは、ラベルは各バーの中央に正しく揃えられます。しかし、私の棒グラフでは、各棒の幅を短くする必要があります。

私は次のコード行を変更しようとしました：

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

は、これはバーの幅を減らすことに成功したが、グラフの全体のサイズを減らすことによって、そのようにします。

また、私は次のコードでheight属性を変更しようとしました：

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/