title: D3.js Stacked Bar Chart Selects
body: <p>I am trying to come to grips with some D3 concepts but feel as though there are some fundamentals gaps in my knowledge. It <strong>seems</strong> to do with how the D3 stack() function works.</p>
  
  <p>I am trying to understand why the following two code snippets are <strong>not</strong> equivalent. The first works and populates data, the second does not.</p>
  
  <p>First (Working Code, Simplified):</p>
  
  <pre><code>var mainStack = d3.stack().keys(keys);
  var seriesData = mainStack(dataset[0]);
  
  gBars = g.selectAll("g")
           .data(seriesData, function (d, i) { return (i); })
           .enter().append("g").. more work here
  </code></pre>
  
  <p>Second (Not Working, Simplifed):</p>
  
  <pre><code>var mainStack = d3.stack().keys(keys);
  var seriesData = mainStack(dataset[0]);
  
  gBars = g.selectAll("g")
           .data(seriesData, function (d, i) { return (i); });
  
  gBars.enter().append("g").. more work here
  </code></pre>
  
  <p>Basically, I have just tried to break up the code to make it simpler (for me) to read, and also to allow me to implement an exit() function. However, when i do the above, the graphs fail to display.</p>
  
  <p>I thought that the gBar variables should maintain their previous selects?</p>
  
  <p>Any assistance would be appreciated, I have successfully used this pattern for simple charts, hence my suspicion that this is related to something I am missing when the d3.stacked() function is involved which nests the data?</p>