Custom map value field for x when using stacked layout

Question

I successfully matched the y values, but I had trouble displaying the x value in an arbitrary field for my values ​​when creating a bar graph using the stack layout . I am not very familiar with Javascript and d3; so I probably missed something basic here.

The value in my dataset looks like { "xInit": 0, "yInit": 91 } . I want to map xInit to x in the graph and yInit - y .

This works ( suggested by Brian Clark ):

 var st = d3.layout .stack() .values(function (d) { return d.values; }) .y(function (v, i) { return v.yInit; }) .out(function (d, y0, y) { dx = d.xInit; d.y0 = y0; dy = y; }); 

And this is not so:

 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; }); 

It gives the following warnings:

 Unexpected value translate(NaN,0) parsing transform attribute. Unexpected value NaN parsing x attribute. 

Am I using stack.x([accessor]) here incorrectly? How to use it?

More details

A full example showing my problem is available as block based on this gist . I would like to create a summary histogram based on the following data:

 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 }] }]; 

Answer 1

I do not quite understand what you are trying to do here, so this is not a complete solution, but I will help you get away.

You can manipulate the outgoing data using the out() function to get the x coordinate you are looking for, and thus make your graph.

 var st = d3.layout.stack() .values(function(d) { return d.values; }) .out(function(d, y0, y) {dx = d.xInit; d.y0 = y0; dy = y; }) .y(function (v, i) { return v.yInit; });