StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POMap custom value field to x value when using a stacked layout
text
Body
copied!<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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload