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

Question

我在 d3 中创建了一个堆积条形图。

这里我想显示如下示例中的值（这是简单的条形图）

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

但不在栏外，在栏内如下：

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

这是我的 Stacked 函数，工作正常：

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