行没有按预期归零
rows do not zero out as expected
在另一个图表上过滤时,我的行顶部图表给出了无意义的无穷小值,而我希望为零。
我认为问题出在以下事实:当您筛选最初不在最高值中的值时,dc 不知道从 "others" 栏中提取您筛选的值即使你不表现出来。就我而言,我没有专门展示它以避免所描述的行为。
我创建了一个 jsfiddle 来显示实际问题:尝试单击底部图表中的 SGD
。 KRW
与人们预期的一样(即顶部的 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。
在另一个图表上过滤时,我的行顶部图表给出了无意义的无穷小值,而我希望为零。
我认为问题出在以下事实:当您筛选最初不在最高值中的值时,dc 不知道从 "others" 栏中提取您筛选的值即使你不表现出来。就我而言,我没有专门展示它以避免所描述的行为。
我创建了一个 jsfiddle 来显示实际问题:尝试单击底部图表中的 SGD
。 KRW
与人们预期的一样(即顶部的 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。