Javascript d3.js堆叠图表变形中的错误
我已经创建了一个堆叠图表动画/更新应用程序。但是,似乎有NaN值被传递到y和height变量中。我不确定出了什么问题。如果切换数据,图表最终会填满 但问题可能首先出现在设置yaxis时Javascript d3.js堆叠图表变形中的错误,javascript,jquery,d3.js,charts,Javascript,Jquery,D3.js,Charts,我已经创建了一个堆叠图表动画/更新应用程序。但是,似乎有NaN值被传递到y和height变量中。我不确定出了什么问题。如果切换数据,图表最终会填满 但问题可能首先出现在设置yaxis时 svg.select("g.y") .transition() .duration(500) .call(methods.yAxis); 看起来bar-re
svg.select("g.y")
.transition()
.duration(500)
.call(methods.yAxis);
看起来bar-rect输入/退出代码出现了问题
//_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
我已设法将问题缩小到setDBlock函数
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;
});
}
如果另一个图表具有相同的数据集,则会在dblock obj中显示其他对象参数
在这个阶段,我不确定如何清理它。但我通过一个传说和一个函数将其隔离
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;
});
}
我已经通过删除更新函数中的数据修复了异常。我不知道为什么,尽管数据不是唯一的——看起来如果数据与上一张图表相同——它会被相应地修改并再次用于下一张图表。有没有更好的方法来解决这个问题?我曾尝试通过克隆/拼接来保持对象的唯一性和干净性,但这可能是导致问题的原因 删除d块; 删除d.总计
你能不能把这个问题一五一十地说出来?i、 e.显示问题的最简单代码集?您甚至可能在创建时发现问题!我不确定是什么造成了这个问题。当试图向多个图表提供数据时,会出现这个问题。在某些地方,其他图表的y数据出现故障,但在切换一组更新后返回。e、 g.只适用于堆叠图表的1个实例-就好像插件不适合其他实例一样-比如需要重置某些内容或不为其他图表设置初始内容将其设置为处理2个图表-打破第二个图表-有时-您的数据结构全乱了-仔细查看“克隆”控制台的输出日志:每个堆栈中有五个“块”,而不是三个,第四个和第五个分别命名为“块”和“总计”,它们的所有值和总体“总计”都是NaN。我强烈支持@ChristopherHackett的评论。您发布的代码总是非常复杂,方法调用其他方法,因此很难遵循。当你把事情分解成非常简单的例子时,你通常可以自己发现错误,如果没有,其他人可以更容易地帮助你。是什么导致了错误-当多个图表的数据相同时。是否修改了相同的数据,然后将其推送到另一个图表?