如何在d3中的每個佈局的堆疊條形圖上顯示數據值

Question

我已經在d3中創建了一個堆疊條形圖。

在這裏，我想顯示像本實施例中下面的值（這是簡單的條形圖）

http://bl.ocks.org/enjalot/1218567

但不是外部的杆，杆內象下面這樣：

http://bl.ocks.org/diethardsteiner/3287802

這是我的堆疊功能，它工作正常：

function barStack(d) 
{ 
    var l = d[0].length 
    while (l--) { 
     var posBase = 0, 
      negBase = 0; 
     d.forEach(function (d) { 
      d = d[l] 
      d.size = Math.abs(d.y) 
      if (d.y < 0) { 
       d.y0 = negBase 
       negBase -= d.size 
      } else { 
       d.y0 = posBase = posBase + d.size 
      } 
     }) 
    } 
    d.extent = d3.extent(d3.merge(d3.merge(d.map(function (e) { 
     return e.map(function (f) { 
      return [f.y0, f.y0 - f.size] 
     }) 
    })))) 
    return d 
} 

對於堆疊酒吧

svg.selectAll(".series") 
    .data(data) 
    .enter() 
    .append("g") 
    .attr("class", "g") 
    .style("fill", function (d, i) {return color(i)}) 
    .selectAll("rect") 
    .data(Object) 
    .enter() 
    .append("rect") 
    .attr("x", function (d, i) {return x(x.domain()[i])}) 
    .attr("y", function (d) { return y(d.y0) }) 
    .attr("height", function (d) { return y(0) - y(d.size) }) 
    .attr("width", x.rangeBand()) 
; 

這也運行良好。 我的數據是這樣的

var data = [{x:"abc", y1:"3", y2:"4", y3:"10"}, 
     {x:"abc2", y1:"6", y2:"-2", y3:"-3" }, 
     {x:"abc3", y1:"-3", y2:"-9", y3:"4"} 
     ] 

現在我要顯示在每一個堆疊佈局Y1，Y2和Y3的這個值。 我已經嘗試了下面的代碼，但是這不會在佈局上顯示值。

svg.selectAll("text") 
    .data(data) 
    .enter() 
    .append("text") 
    .attr("transform", "translate(50,0)") 
    .attr("text-anchor", "middle") 
    .attr("x", function(d, i) {return (i * (width/data.length)) + ((width/data.length - 50)/2);}) 
    .attr("y", function(d) {return y(0) - y(d.size) + 14;}) 
    .attr("class", "yAxis") 
    .text(function(d) {return y(d.size);}) 
    ; 

請幫我在這，我需要改變或什麼確切的我需要把這個代替或者可能是上面的代碼是完全錯誤的。 如果我需要更多輸入，請讓我知道。我有總的POC，我也可以分享。

我添加了所有代碼的jsfiddle

http://jsfiddle.net/goldenbutter/HZqkm/ 

Answer 1

Here是一把小提琴，你想要做什麼。

var plots = svg.selectAll(".series").data(data) 
    .enter() 
    .append("g") 
    .classed("series",true) 
    .style("fill", function(d,i) {return color(i)}) 

plots.selectAll("rect").data(Object) 
    .enter().append("rect") 
    .attr("x",function(d,i) { return x(x.domain()[i])}) 
    .attr("y",function(d) { return y(d.y0)}) 
    .attr("height",function(d) { return y(0)-y(d.size)}) 
    .attr("width",x.rangeBand()); 

plots.selectAll("text.lab").data(Object) 
    .enter().append("text") 
    .attr('fill','black') 
    .attr("text-anchor", "middle") 
    .attr("x", function(d, i) { return x(x.domain()[i]) + (x.rangeBand()/2)}) 
    .attr("y", function(d) {return y(d.y0) + 20}) 
    .text(function(d) {return (d.size).toFixed(2);});