d3.js : how to access fill attribute of svg group element (stacked bar chart)
<p>newbie d3.js here, i'm trying to understand the sample of stacked bar chart using <code>d3.stack()</code> (<b>note : </b>not <code>d3.<i>layout.stack()</i></code>) from the sample link : <a href="http://bl.ocks.org/mbostock/3886208" rel="nofollow">http://bl.ocks.org/mbostock/3886208</a> (by Mike Bostock)</p>

<p>I'm trying to access the fill attribute of each svg group elements which each represents a single 'layer' / age group. To do so, I do a little modification at the "enter" part :</p>

<pre><code>var seriesG = g.selectAll(".serie") 
    .data(function(){return stackedColumns;})
    .enter().append("g")
      .attr("class", "serie")
      .attr("fill", function(d) {return z(d.key); });
</code></pre>

<p>Since <code>console.log(seriesG);</code> resulted in <code>zi {_groups: Array[1], _parents: Array[1]}</code>, i figured that the seven svg group elements that represents the seven age range groups is accessible in the <code>_groups</code> member object.</p>

<p>Now, I can access each svg group element by this basic recursive routine : <pre><code>seriesG._groups.forEach(function(d, i){
    console.log(d);
  });</code></pre>
which displays <code>[g, g, g, g, g, g, g]</code> in the browser element inspector console (opera). What I'm trying to figure out is the correct syntax to access the fill attribute of the 'd' datum. And since by observing the browser console I know that the 'fill' is the member of <code>'outerHTML'</code> member attribute of the 'd' datum, first I must know how to access this 'outerHTML' attribute. I have tried various syntax : </p>

<ul>
<li><code>console.log(d.attr("outerHTML"));</code></li>
<li><code>console.log(d.attr.outerHTML);</code></li>
<li><code>console.log(d.outerHTML);</code></li>
<li><code>console.log(d["outerHTML"]);</code></li>
</ul>

<p>The first two tries resulted in <code>Uncaught TypeError: d.attr is not a function</code>, while the remaining two are <code>undefined</code> operations.</p>

<p>So, in the short version of my question is : "What is the correct syntax to access the fill of each svg group element created using <code>d3.stack()</code>?"</p>

<p>My ultimate goal is to add various functionality similiar to this sample link : <a href="http://bl.ocks.org/KatiRG/f7d064cd9c3efbc3c360" rel="nofollow">http://bl.ocks.org/KatiRG/f7d064cd9c3efbc3c360</a></p>