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

Question

我试图得到一个堆叠的条形图过渡在相同的方式作为这个条形图- http://www.animatedcreations.net/d3/animatedBarChart_Slide.html我一直在遵循Mike Bostock的"一个条形图，第2部分"的例子，事情是OK的，直到将堆叠的条形图转换进来和出来。
我的破碎的例子在这里- http://www.animatedcreations.net/d3/stackedBarChart7.html我确信问题出在我如何设置数据上，如下所示。我甚至想知道数据是否需要转换为列而不是层?谢谢。

From 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

在这个问题中，过渡显然是最棘手的部分，所以我倾向于从您提供的简单条形图示例转向使用Mike Bostock示例的堆叠条形图。

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

因此，首先，让我们为每个元素定义一个值数组:

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

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

• 首先格式化bar栈的数据:

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

• 然后为每一叠bar创建组

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

• 移动每个bar组来更新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()
  

下面是一个工作示例。

PS:下次，请提供jsFiddles，这样我们就不必去你的页面源代码提供一个解决方案。此外，尽量减少尽可能多的代码的例子(删除轴，无用的解析等)，所以我们可以专注于什么是错误的。此外，在这个过程中，当你孤立它时，你经常会自己发现问题。