javascript - Bug in d3.js Stacked chart morphing -


i've created stacked chart animation/update app. there appears nan values being passed y , height variables. unsure wrong. if toggle data charts fill up.

jsfiddle

but problem may occur first in setting yaxis

                 svg.select("g.y")                   .transition()                     .duration(500)                       .call(methods.yaxis); 

it looks goes wrong in bar rect enter/exit code.

                //_morph bars                          var bar = stacks.selectall("rect")                     .data(function(d) {                         return d.blocks;                      });                  // enter                 bar.enter()                     .append("rect")                     .attr("class", "bar")                     .attr("y", function(d) { return methods.y(d.y1); })                     .attr("width", methods.x.rangeband())                     .style("fill", function(d) { return methods.color(d.name); });                  // update                 bar                     .attr("y", methods.height)                     .attr("height", initialheight)                     .attr("width", methods.x.rangeband())                     .transition()                     .duration(500)                     .attr("x", function(d) { return methods.x(d.label); })                     .attr("width", methods.x.rangeband())                     .attr("y", function(d) { return methods.y(d.y1); })                     .attr("height", function(d) { return methods.y(d.y0) - methods.y(d.y1); })                  // exit                 bar.exit()                     .transition()                     .duration(250)                     .attr("y", function(d) { return methods.y(d.y1); })                     .attr("height", function(d) { methods.y(d.y0) - methods.y(d.y1); })                     .remove();                   //__morph bars 

enter image description here

i've managed narrow down problem setdblock function.

it appears if chart has same set of data, takes on additional object parameters inside dblock obj.

http://jsfiddle.net/xnngu/44/

i'm not sure @ stage how clean up. have isolated via legend , function.

setdblocks: function(incomingdata){                         var data = incomingdata.slice(0);                          methods.color.domain(d3.keys(data[0]).filter(function(key) { return key !== "label"; }));                          data.foreach(function(d) {                             console.log("d", d);                              var y0 = 0;                              if(d["blocks"] == undefined){                                 d.blocks = methods.color.domain().map(function(name) {                                     var val = d[name];                                      if(isnan(val)){                                         val = 0;                                     }                                      return {name: name, values: val, y0: y0, y1: y0 += +val};                                 });                             }                              d.total = d.blocks[d.blocks.length - 1].y1;                         });                                      } 

Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -