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
Post a Comment