javascript - d3 stack appears to be working but getting NaN when values are pushed to svg rect -


i created chart trying recreate except want height of bars dynamically populated based on data in threshold array: http://jsfiddle.net/featherita/lw7kz/

so, if values 1,20,40, scale colored rectangles accordingly.

i'm attempting use stack function:

var layers = d3.layout.stack()(datachartdata.summarydata.threshold.map(function () {         return datachartdata.summarydata.threshold.map(function (d) {             return { x: 0, y: +d, y0: 0 };             });     })); 

this console log data (even though y0 value incorrect), data in right format. however, when try take these values , pull them rectangle values error: error: invalid value attribute y="nan". i'm calling "layers":

svg.selectall("rect")         .data(layers, function(d){return d;})         .enter()         .append("rect")         .attr("width", 7)         .attr("x", function (d) { return xscale(d.x); })         .attr("y", function (d) { return -yscale(d.y0) - yscale(d.y); })         .attr("height", function (d) { return yscale(d.y); })         .style("fill", function (d) { return color(d); }); 

any appreciated!!!

your layers array not formatted way think is. right array of 3 arrays values created d3.layout.stack function call. said , current format, can access values following:

.attr("y", function (d, i) { return yscale(d[i].y); }) 

Comments

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

javascript - jQuery show full size image on click -