d3 y軸ラベルの位置

Question

左のy軸バーではなく、バーのすぐ上にある各バーの量を持つグループ化された棒グラフデザインがあります。

私はそう...

svg.selectAll(".text") 
.data(data) 
.enter() 
.append("text") 
.attr("class","label") 
    .attr("x", function(d) { return x1(d.rate) }) 
    //.attr("y", function(d) { return y(d.value) + 1; }) 
.attr("dy", ".75em") 
.text(function(d) {return d.value; }); 

のようにテキストを追加したが、私は、xとyの値バーの位置に応じたとd.valueの実際のテキストを取得していないを得るように見えるカント挿入された。ここ

サンプル： https://jsfiddle.net/6p7hmef1/7/

Answer 1

あなたが追加しているテキストにバインドされたデータが適切ではないため、です。

console.logを次のように追加すると、ラベルが挿入されていない理由がわかります。コンソールの出力を確認してください。 Console log fiddle

.text(function(d) {console.log(d); return d.value; }); 

一つのアプローチは、バー・グループ（あなたのケースでは「スライス」）にテキストを追加することです。ちょうどあなたがバーのために行うのと同じように。ここではこれをやってフィドルです： JS Fiddle Demo

slice.selectAll(".text") 
    .data(function(d) { return d.values; }) 
    .enter() 
    .append("text") 
    .attr("class","label"); 
    slice.selectAll('text.label') 
    .attr("x", function(d) { return x1(d.rate)+ x1.rangeBand()/3 }) 
    .attr("y", function(d) { return y(d.value) + 1; }).attr('dy', '-0.4em') 
    .text(function(d) {return d.value; }); 

テキストがバーの移行の前に示されているように、これは奇妙に見えるかもしれません。バーが表示されたら、テキストの価値を変えることは、私にとって正しいアプローチのようです。

はここ最終フィドルだ（DXとDY属性は、要件ごとに調整することができます）：私は、すべての移行のための「終了」コールバックを使用し、それに応じてテキスト値を変更してい JS FIDDLE

。

.each('end', function() { 
    d3.select(this.parentNode).selectAll('text.label') 
     .attr("x", function(d) { return x1(d.rate)+ x1.rangeBand()/3 }) 
     .attr("y", function(d) { return y(d.value) + 1; }).attr('dy', '-0.4em') 
     .text(function(d) {return d.value; }); 
}) 

これが役に立ちます。 :) コードの一部が理解できない場合は教えてください。