Question

我创建了一个堆积图表动画/更新应用。然而，似乎有NaN值被传递到y和height变量。我不确定是什么问题。如果您切换数据，图表最终会填满。

但是在设置yaxis时可能会出现问题

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

看起来直接输入/退出代码出错了。

                //_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

Answer 1

enter image description here

我设法将问题缩小到setDBlock函数。

如果另一个图表具有相同的数据集，则会显示dblock obj中的其他对象参数。

http://jsfiddle.net/XnngU/44/

我现阶段不确定如何清理它。但我通过传奇和功能将其分离出来。

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;
                        });                 
                    }

Answer 2

我通过删除更新功能中的数据来修复异常。我不确定为什么虽然数据不是唯一的 - 看起来如果数据是相同的 - 就像最后一个图表一样 - 它会相应地进行修改并再次用于下一个图表。有没有更好的清理方法 - 我试图通过克隆/拼接来保持对象的独特和清洁，但这可能会导致问题。

删除d.blocks; 删除d.total;

http://jsfiddle.net/XnngU/53/

update: function(data){
                        methods.el = this;
                        var selector = methods.el["selector"];

                        data.forEach(function(d) {
                              delete d.blocks;
                            delete d.total;
                        });

                        methods.animateBars(selector, data);                         
                    }

d3.js中的错误堆积图表变形

2 个答案: