行没有按预期归零

rows do not zero out as expected

在另一个图表上过滤时,我的行顶部图表给出了无意义的无穷小值,而我希望为零。

我认为问题出在以下事实:当您筛选最初不在最高值中的值时,dc 不知道从 "others" 栏中提取您筛选的值即使你不表现出来。就我而言,我没有专门展示它以避免所描述的行为。

我创建了一个 jsfiddle 来显示实际问题:尝试单击底部图表中的 SGDKRW 与人们预期的一样(即顶部的 2 个图表显示完全相同的东西)。

SO 迫使我为该问题添加一些代码,所以这里是:

var ndx = crossfilter(theData);
var dims = {};
var groups = {};


var field1Chart = dc.barChart("#field1Chart");
dims.field1 = ndx.dimension("field1");
groups.field1 = {};
groups.field1.valueSum = dims.field1.group().reduceSum((d) => d.value1);
field1Chart
    .height(200)
    .width(800)
    .dimension(dims.field1)
    .group(groups.field1.valueSum)
    .valueAccessor((d) => d.value)
    .x(d3.scaleBand())
    .elasticX(true)
    .xUnits(dc.units.ordinal);

var field2Chart = dc.barChart("#field2Chart");
dims.field2 = ndx.dimension("field2");
groups.field2 = {};
groups.field2.valueSum = dims.field2.group().reduceSum((d) => d.value2);
field2Chart
    .height(200)
    .width(800)
    .dimension(dims.field2)
    .group(groups.field2.valueSum)
    .valueAccessor((d) => d.value)
    .x(d3.scaleBand())
    .elasticX(true)
    .xUnits(dc.units.ordinal);

var field3Chart = dc.rowChart("#field3Chart");
dims.field3 = ndx.dimension("field3");
groups.field3 = {};
groups.field3.valueSum = dims.field3.group().reduceSum((d) => d.value3);
field3Chart
    .dimension(dims.field3)
    .group(groups.field3.valueSum)
    .valueAccessor(d => Math.abs(d.value))
    .renderLabel(true)
    .labelOffsetY(10)
    .elasticX(true)
    .rowsCap(10)
    .othersGrouper(null);

var field3Chart2 = dc.rowChart("#field3ChartBis");
field3Chart2
    .dimension(dims.field3)
    .group(groups.field3.valueSum)
    .valueAccessor(d => Math.abs(d.value))
    .renderLabel(true)
    .labelOffsetY(10)
    .elasticX(true)
    .rowsCap(10);

var combinedChart = dc.barChart("#combinedChart");
dims.combined = ndx.dimension((d) => [d.field1, d.field2], true);
groups.combined = {}
groups.combined.valueSum = dims.combined.group().reduce(
    (p, v) => {
        if (!p.hasOwnProperty(v.field1)) {
            p[v.field1] = 0;
        }
        if (!p.hasOwnProperty(v.field2)) {
            p[v.field2] = 0;
        }
        p[v.field1] += +v.value1;
        p[v.field2] += +v.value2;
        return p;
    },
    (p, v) => {
        p[v.field1] -= +v.value1;
        p[v.field2] -= +v.value2;
        return p;
    },
    () => {
        return {}
    }
);
combinedChart
    .height(200)
    .width(800)
    .dimension(dims.combined)
    .group(groups.combined.valueSum)
    .valueAccessor((d) => Math.abs(d.value[d.key]))
    .x(d3.scaleBand())
    .elasticX(true)
    .xUnits(dc.units.ordinal);


dc.renderAll();

您 运行 陷入浮点舍入问题。当您的值的幅度变化很大时,通常会发生这种情况。

如果你把一堆浮点数相加,然后再减去相同的数,结果往往不是零。这是因为floating point addition and subtraction is not necessarily associative or distributive

浮点数本质上是不精确的。举个很简单的例子,

1000000000 + 0.00000001 - 1000000000 - 0.00000001 === -0.00000001

当您点击 KRW 或 CHF 等货币时,您看不到它,因为有些行具有显着的价值,因此无穷小的行太小而看不到。

这已涵盖in the dc.js FAQ and the snap_to_zero solution fixes your fiddle