Question

我试图以与此条形图相同的方式获得堆叠条形图 - http://www.animatedcreations.net/d3/animatedBarChart_Slide.html 我一直在关注Mike Bostock的“条形图，第2部分”示例，并且可以将堆叠的条形图转换进去。我破碎的例子在这里 - http://www.animatedcreations.net/d3/stackedBarChart7.html 我有理由确定问题在于如何设置数据，如下所示。我甚至想知道数据是否需要转换为列而不是层？非常感谢洞察:)谢谢。

来自redraw（）：

// stack the new data
var stacked = d3.layout.stack()(["act1", "act2","act3","other"].map(function(activity){
    return stats.map(function(d) {
        return {x:(d.hour), y: +d[activity]};
    });
}));

// update x axis 
x.domain(stacked[0].map(function(d) { return d.x; })); 

var valgroup = graph.selectAll("g.valgroup").data(stacked);

// want the data in d.  var rect contains the data AND functions. 
// I am guessing this is where it all breaks??
var rect = valgroup.selectAll("rect")
    .data((function(d) { return d; }), (function(d) { return d.x; }));   
         // new data set.  slide by hour on x axis.

Answer 1

在这个问题中，转换显然是最棘手的部分，所以我更喜欢从你提供的simple bar example开始，然后使用Mike Bostock的例子转到stacked bar图表。

您提供的堆叠实现的主要问题是信息被“反转”，因为您希望每个条形图位于数据数组的不同元素中，这样您就可以通过其时间戳识别数据。

首先，让我们用每个元素的值数组定义一些数据：

function next () {
    return {
        time: ++t,
        value: d3.range(3).map(getRand)
    };
}

然后，在redraw()函数内部：

首先格式化条形码数据：

customData = data.map(function(d){
    y0=0
    return {value:d.value.map(function(d){return {y0:y0, y1: y0+=d}}), time:d.time}
})

然后为每个条形码

创建组

var state = graph.selectAll(".g")
    .data(customData, function(d) { return d.time; });
var stateEnter = state.enter().append("g")
    .attr("class", "g")
    .attr("transform", function(d) { return "translate(" + x(d.time+1) + ",0)"; });

然后，添加该组的一叠条：

stateEnter.selectAll("rect")
    .data(function(d) { return d.value; })
    .enter().append("rect")
    .attr("width", barWidth)
    .attr("y", function(d) {return y(d.y1); })
    .attr("height", function(d) { return y(d.y0) - y(d.y1); })
    .attr("class", "bar")
    .style("fill", function(d,i) { return color(i); });

移动每个条形组以更新x值：

state.transition().duration(1000)
    .attr("transform", function(d) {console.log(d); return "translate(" + x(d.time) + ",0)"; });

删除旧值

state.exit()
    .attr("transform", function(d) {return "translate(" + x(d.time) + ",0)";})
    .remove()

Here is a working example。

PS：下次请提供jsFiddles，这样我们就不必去你网页的源代码来提供解决方案了。另外，尽量尽量减少示例代码（删除轴，无用的解析等），这样我们就可以专注于错误。此外，在此过程中，您通常会在隔离问题时自己发现问题。

D3.js堆积条形图破碎过渡

1 个答案: