javascript - Can't get update to work on a graph in D3 -
i have been trying d3 work in django app. working examples found, can plot (very dense) stacked bar chart. problem sorts of error when try update.
to isolate why, went , re-wrote graphing/update 1 function, gets called code. main code looks now:
if(!graphalreadypainted) { plotgraph(false, data1, data2); // false === not update graphloaded = true; graphalreadypainted = true; else { plotgraph(true, data1, data2); // true === update current graph } just debug, don't yet have logic differentiates 2 cases. on second pass through (the first update) error cannot read property 'domain' of undefined.
the actual code looks so:
//d3 code if(!graphloaded) { var margin = {top: 20, right: 50, bottom: 30, left: 50}, width = 400 - margin.left - margin.right, height = 300 - margin.top - margin.bottom; var x = d3.scale.ordinal() .rangeroundbands([0, width], .35); var y = d3.scale.linear() .rangeround([height, 0]); var color = d3.scale.category20(); var xaxis = d3.svg.axis() .scale(x) .orient("bottom"); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); } function plotgraph(isupdate, xdata, chartdata) { var dataintermediate = xdata.map(function (c) { return chartdata.map(function (d) { return {x: d.year, y: d[c]}; }); }); var datastacklayout = d3.layout.stack()(dataintermediate); x.domain(datastacklayout[0].map(function (d) { return d.x; })); y.domain([0, d3.max(datastacklayout[datastacklayout.length - 1], function (d) { return d.y0 + d.y;}) ]) .nice(); var layer = svg.selectall(".stack") .data(datastacklayout) .enter().append("g") .attr("class", "stack") .style("fill", function (d, i) { return color(i); }); layer.selectall("rect") .data(function (d) { return d; }) .enter().append("rect") .attr("x", function (d) { return x(d.x); }) .attr("y", function (d) { return y(d.y + d.y0); }) .attr("height", function (d) { return y(d.y0) - y(d.y + d.y0); }) .attr("width", x.rangeband()); svg.append("g") .attr("class", "axis") .attr("transform", "translate(0," + height + ")") .call(xaxis); } i haven't put in logic separate cases of update vs. paint first time, yet bombs out - feeling scope issue (since seems unable resolve reference). can't scope issue since using same code: 1 function without branching 2 cases (first draw vs. update).
the data going in looks identical (same routine generates it, , debugger proves it). missing here? first paint goes fine - subsequent calls blow up.
Comments
Post a Comment