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

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

1 个答案: