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

Popular posts from this blog

neo4j - finding mutual friends in a cypher statement starting with three or more persons -

php - How to remove letter in front of the word laravel -

minify - Minimizing css files -