dynamic - D3.js stacked bar chart broken transition -

I am trying to get a stacked bar chart to infect this type of chart in the same way - I'm following Mike Posock, "Once, Chart, Part 2" examples, and the stacked bars Things are OK to infect inside and outside.
My broken example is here - I'm sure the problem is how I am setting the data, as shown below. I am also thinking that the data needs to be changed in columns rather than layers? Insight is much appreciated :) Thanks.

from redraw ():

  // stacked new data var stacked = d3.layout.stack () (["act1", "Act 2", "Act 3", "other"]. Map (function) {return statistics.map (function (d) {returns {x: (dhor), y: + d [activity]};})}} ); // Update x axis x.domain (stacked [0] .map (function (d) {return dx;})); Var valgroup = graph.selectAll ("g.valgroup"). Data stacked; // D want data in Var Rect, contains data and functions I // I'm guessing that it all breaks ?? Var rect = valgroup.selectAll ("rect") .data ((function (d) {return d;}), (function (d) {return dx;})); // New Data Set Slide on X axis by hour    
 
 
 In this problem, The transition is clearly the most difficult part, so I liked to go and go to the chart using the example provided by Mike Boston.  
 The main problem with stacked implementation is that the information is "reversed" because you want to have every time the data is in a different element of the array, in this way you can identify your data by doing this First, let's define some data with an array of values ​​for each element:  
  function next () {return {time: ++ t, value: d3 .range (3) .map (getRand)}; }   
 Then,  redraw ()  function:  
 
 
 The first format of data for bar stack inside:  
  customData = data.map (function (d) {y0 = 0 return {value: d.value.map (function (d) {return {y0: y0, y1: y0 + =   
  
   
  
 Var state = graph SelectAll (".G"). Data (custom data, function (D) {return D. time;}); ("class", "g") .attr ("conversion", function (d) {return " "+ X (D. time + 1) +", 0) ";});    
 
 Then, add a heap of group bars:  
  stateEnter.selectAll ("re Ct "). Data (function (d) {return d.value;}) .inter () .andend (" rect ") .triter (" width ", barvid). Eteter (" y ", function (d) { Returns y (di1 ("square", "bar"). Style ("fill") () "." ("Height", function (d) {return y (d.y0) - y (d. Y1);})., Function (D, i) {color of return (i);});    
 
 Move the bar group:  
  state.transition (). Duration (1000) .attr ("conversion", function (d) {console.log (d); return "translation (" + x (d.time) + ", 0)";});  
 
 Remove the old values ​​ 
  state.exit () .attr ("transform", function (d) {return "translate (" + x ( D.time) + ", 0)";}) .remove ()     
  
 PS: Next time, please jsFiddles Please provide us with the source code of your page to provide a solution. In addition, try to minimize your example code as little as possible (remove pivot, waste parsing etc.) so that we can focus on what is wrong. In addition, in this process you will often find the problem as yourself because you separate it.