单击父图表后，dc.js 图表组未更新图表上的正确值

Question

我的问题是我有一个用于计算节省的交叉过滤器组减少功能，但是当在图表上应用过滤器时，它似乎没有通过正确的过滤器。我也有一个类似的案例工作示例。

我创建了两个 jsbin，其中一个具有正确的行为。

在这种情况下，我有两年的数据，即 2010 年和 2014 年。但在 Savings(not working) 图表中，运营商饼图没有按年份过滤，而在 DIFOT(working) 图表中是这样。

链接是： DIFOT（工作）：http://jsbin.com/bagohavehu/2/edit 节省（未按预期工作）：http://jsbin.com/yudametulo/2/edit

非常感谢您的时间和精力。

问候， 动漫

Answer 1

要跟踪这些计算问题，您确实需要使用调试器并在归约函数或绘图函数中放置断点，以查看最终得到的归约值。

我发现在 jsbin 中使用浏览器的调试器非常困难（不可能？），所以我再次将您的代码粘贴到两个 jsfiddles 中：

parseFloat 版本：http://jsfiddle.net/gordonwoodhull/aqhLv0qc/

parseInt 版本：http://jsfiddle.net/gordonwoodhull/9bnejpLx/1/

现在，我们在 chart.redraw (dc.js:1139) 中设置一个断点，以查看它在单击切片时尝试绘制的值。

第一次命中断点并不有趣，因为它只是我们点击的年度图表，但第二次命中的是运营商图表，它揭示了很多。为 parseInt 版本打印 _chart.group().all()：

现在，对于 parseFloat 版本：

由于计算结果与 int 版本完全一致，因此您最终会得到 1 - 0/0 === NaN，并且在某处 dc.js 或 d3.js 默默地将 NaN 强制为零。

但由于浮点计算永远不会精确，因此您最终会得到1 - 0/-3e-15 === 1。

您希望避免除以零或任何接近零的值，因此在您的归约函数中添加检查会产生（我认为）所需的结果：

var group = Dim.group().reduce(
    function(p,v){
        p.current += parseFloat(v.currentPrice);
        p.compare += parseFloat(v.comparePrice);
        if(Math.abs(p.compare) > 0.01) {
            p.savings  = p.current/p.compare;
            p.result   = 1-p.savings;
        }
        else p.result = 0;
        return p;
    },
    function(p,v){
        p.current -= parseFloat(v.currentPrice);
        p.compare -= parseFloat(v.comparePrice);
        if(Math.abs(p.compare) > 0.01) {
            p.savings  = p.current/p.compare;
            p.result   = 1-p.savings;
        }
        else p.result = 0;
        return p;
    },
    function(){return { current: 0, compare: 0,savings:0, result:0};}
);

工作版（我认为）：http://jsfiddle.net/gordonwoodhull/y2sf7y18/1/