如何在D3中堆叠条形图的每个布局上显示数据值

Question

I have created a stacked bar chart in d3.

Here I want to display the value like this below example (This is Simple Bar chart)

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

But not outside the bar, inside the bar like below :

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

This is my Stacked function which is working fine :

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
}

For stacked Bar

 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())
;

This was also running fine. My data is like that

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"}
       ]

Now I want to show this value of y1, y2 and y3 in every stacked layout. I have tried this below code, but this is not displaying the value over layout.

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);})
    ;   

Please help me on this, where I need to change or what exact I need to put instead of this or might be above code was totally wrong. Please let me know if any more input required by me. I have the total POC and I can share that too.

i have added all code in jsfiddle

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

Answer 1

Here is a fiddle that does what you want.

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);});