title: Map custom value field to x value when using a stacked layout
body: <p>I successfully mapped y values, but I'm having trouble mapping an x value to an arbitrary field on my values when creating a stacked bar graph using the <a href="https://github.com/mbostock/d3/wiki/Stack-Layout" rel="nofollow noreferrer">stack layout</a>. I'm not really familiar with Javascript and d3; so I'm probably missing something basic here.</p>
  
  <p>A value in my array of data looks like <code>{ "xInit": 0, "yInit": 91 }</code>. I want to map <code>xInit</code> to <code>x</code> in the graph and <code>yInit</code> to <code>y</code>.</p>
  
  <p>This works (<a href="https://stackoverflow.com/a/11512613/322283">suggested by Bryan Clark</a>):</p>
  
  <pre><code>var st = d3.layout
             .stack()
             .values(function (d) { return d.values; })
             .y(function (v, i) { return v.yInit; })
             .out(function (d, y0, y) { d.x = d.xInit; d.y0 = y0; d.y = y; });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/GiY2a.png" alt="This works, the x coords are taken from value.xInit"></p>
  
  <p>And this doesn't:</p>
  
  <pre><code>var st = d3.layout.stack()
             .values(function (d) { return d.values; })
             .y(function (v, i) { return v.yInit; })
             .x(function (v, i) { return v.xInit; });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/o3gDz.png" alt="Fail! value.x returns NaN"></p>
  
  <p>It gives the following warnings:</p>
  
  <pre class="lang-none prettyprint-override"><code>Unexpected value translate(NaN,0) parsing transform attribute.
  Unexpected value NaN parsing x attribute.
  </code></pre>
  
  <p>Am I using <code>stack.x([accessor])</code> incorrectly here? How should I use it then?</p>
  
  <p><em>Details</em></p>
  
  <p>A complete example showing my problem is available as a <a href="http://bl.ocks.org/3103475" rel="nofollow noreferrer">block</a> based on this <a href="https://gist.github.com/3103475/" rel="nofollow noreferrer">gist</a>. I would like to create a stacked bar graph based on the following data:</p>
  
  <pre><code>initialData = [ {
            "name": "apples",
            "values": [{ "xInit": 0, "yInit": 91 }, { "xInit": 1, "yInit": 290 }, { "xInit": 2, "yInit": 120 }]
        },{
            "name": "oranges",
            "values": [{ "xInit": 0, "yInit": 9 }, { "xInit": 1, "yInit": 49 }, { "xInit": 2, "yInit": 37 }]
        }];
  </code></pre>