d3.js 中的错误堆叠图表变形答案

【问题标题】：Bug in d3.js Stacked chart morphingd3.js 中的错误堆叠图表变形
【发布时间】：2014-03-10 10:36:15
【问题描述】：

我创建了一个堆叠图表动画/更新应用程序。然而，似乎有 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

【问题讨论】：

您不能在您的 JSFiddle 中提炼问题吗？即出现问题的最简单的代码集？您甚至可能在创建它时发现问题！
我不确定是什么造成了问题。尝试向多个图表提供数据时会出现此问题。其他图表的 y 数据在某处出现故障 - 但在切换一组更新后又回来了。例如仅适用于堆叠图表的 1 个实例 - jsfiddle.net/XnngU/17 - 好像插件不能很好地满足其他实例 - 就像需要重置或最初不为其他图表设置的东西
使其能够处理 2 个图表 - 打破第二个图表 - 有时 - jsfiddle.net/XnngU/18
你的数据结构一团糟——仔细查看你的“克隆”控制台日志的输出：每个堆栈中有五个“块”，而不是三个，第四个和第五个是命名为“blocks”和“total”，它们的所有值和你的整体“total”都是NaN。
我强烈支持@ChristopherHackett 的评论。您发布的代码总是非常复杂，方法调用其他方法，因此很难遵循。当您将事情分解为非常简单的示例时，您通常可以自己发现错误，如果没有，其他人可以更轻松地帮助您。

标签： javascript jquery d3.js charts

【解决方案1】：

我已设法将问题缩小到 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;
                        });                 
                    }

【讨论】：

导致错误的原因 - 当多个图表的数据相同时。相同的数据是否被修改然后推送到另一个图表？

【解决方案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);                         
                    }

【讨论】：