0

我在 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/
4

1 回答 1

2

这是一个做你想做的小提琴。

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);});
于 2013-05-15T17:03:20.897 回答