直流交叉滤波器不工作 [英] Dc cross-filter not working
问题描述
使用 dc & 构建 grails 应用程序在这里交叉过滤 js 库，但不知何故在可视化中面临一个非常奇怪的问题.
Building a grails application using dc & cross-filter js libraries here, but facing an extremely weird issue in the visualization somehow.
我的可视化是 5 个条形图，它们使用 dc 和 cross-filter js 库相互连接.
My visualization is of 5 bar charts, which are interconnected to each other using dc and cross-filter js libraries.
因此，有简单指标、计算指标 (%) 和最后计算指标(不含 %).对于这三种类型，每部分代码有三种不同类型的if-else(5个条形图)
So, there are simple metrics, calculated metrics (%) and lastly calculated metrics (without %). For these three types, there are three different types of if-else in each part of code (for 5 bar charts)
但是，问题在于最后一个 if-else，这里 交叉过滤器出错，我们在几次选择后得到负值 和所有条形图表被抬离 x 轴.这非常奇怪，我不明白这里出了什么问题.(参考下图)
But, the problem lies in the last if-else, here the cross-filter goes wrong and we get negative values after a couple of selections and all the bar charts are lifted off the x-axis. This is extremely weird and I don't understand what is going wrong here. (See image below for reference)
我们在第二个 if-else 和第三个 if-else 中有相同的代码片段，但第三个 if-else 搞砸了交叉过滤器的功能.有人可以解释一下这里出了什么问题吗?
We have the same code snippet in the second if-else and the third if-else, but the third if-else screws up the functionality of cross-filter. Can someone please explain what is going wrong here?
代码:
var devValue = facts.dimension(function (d) {return d.c;});
var a = ($('metric').value);
// Basic metrics
if(a == "Product views"||a == "Visits"||a == "Units")
{
var devValueGroupSum = devValue.group().reduceSum(function(d) { return +d.g;});
barChart4.width(600)
.height(250)
.margins({top: 10, right: 100, bottom: 20, left: 80})
.dimension(devValue)
.yAxisLabel($('metric').value)
.group(devValueGroupSum)
.transitionDuration(800)
.centerBar(true)
.gap(60)
.x(d3.scale.ordinal().domain(["DESKTOP/LAPTOP", "SMARTPHONES", "TABLETS","OTHERS"]))
.brushOn(false)
.title(function(d) { return d.key + ": " + d3.round(d.value,2); })
.elasticY(true)
.barPadding(0.5)
.xUnits(dc.units.ordinal);
}//end of if
// Calculated metrics (%)
else if(a == "Conversion Rate"||a=="Bounce Rate")
{
var devValueGroupSum = devValue.group().reduce(
function (p, v) {
p.sumIndex1 += v.g
p.sumIndex2 += v.h
if (p.sumIndex2 === 0)
p.avgIndex = 0;
else
p.avgIndex = (p.sumIndex1 / p.sumIndex2) * 100 ;
return p;
},
function (p, v) {
p.sumIndex1 -= v.g;
p.sumIndex2 -= v.g;
return p;
},
function () {
return {sumIndex1: 0,sumIndex2:0, avgIndex: 0};
}
);//end of reduce
barChart4.width(600)
.height(250)
.margins({top: 10, right: 100, bottom: 20, left: 80})
.dimension(devValue)
.group(devValueGroupSum)
.valueAccessor(function (p) {
return p.value.avgIndex;
})
.transitionDuration(800)
.yAxisLabel($('metric').value)
.centerBar(true)
.gap(60)
.x(d3.scale.ordinal().domain(["DESKTOP/LAPTOP", "SMARTPHONES", "TABLETS","OTHERS"]))
.brushOn(false)
.title(function(d) { return d.key + ": " + d3.round(d.value.avgIndex,2); })
.elasticY(true)
.barPadding(0.5)
.xUnits(dc.units.ordinal);
}//end of else-if
// Calculated metrics ( without %)
else if(a == "Average Order Size(AOS)" || a=="Average Unit Revenue(AUR)" || a=="Units per order")
{
var devValueGroupSum = devValue.group().reduce(
function (p, v) {
p.sumIndex1 += v.g
p.sumIndex2 += v.h
if (p.sumIndex2 === 0)
p.avgIndex = 0;
else
p.avgIndex = (p.sumIndex1 / p.sumIndex2) * 1 ;
return p;
},
function (p, v) {
p.sumIndex1 -= v.g;
p.sumIndex2 -= v.g;
return p;
},
function () {
return {sumIndex1: 0,sumIndex2:0, avgIndex: 0};
}
);//end of reduce
barChart4.width(600)
.height(250)
.margins({top: 10, right: 100, bottom: 20, left: 80})
.dimension(devValue)
.group(devValueGroupSum)
.valueAccessor(function (p) {
return p.value.avgIndex;
})
.transitionDuration(800)
.yAxisLabel($('metric').value)
.centerBar(true)
.gap(60)
.x(d3.scale.ordinal().domain(["DESKTOP/LAPTOP", "SMARTPHONES", "TABLETS","OTHERS"]))
.brushOn(false)
.title(function(d) { return d.key + ": " + d3.round(d.value.avgIndex,2); })
.elasticY(true)
.barPadding(0.5)
.xUnits(dc.units.ordinal);
}
else
{
}//end of else
更新:
好的，在答案的帮助下，我将代码更改如下，负条消失了，但仍然只有初始视图是正确的.之后，如果我选择任何条来过滤所有图表，过滤不会发生.图表不再更改.
okay, with the help of answers, I changed my code as following, the negative bars have disappeared but still only the initial view is correct. After which, if I select any of the bars to filter across all the charts, the filtering does not happen. Charts don't change anymore.
代码#2:
function (p, v) {
//snippet begins
p.sumIndex1 += v.g
p.sumIndex2 += v.h
if (p.sumIndex2 === 0)
p.avgIndex = 0;
else
p.avgIndex = (p.sumIndex1 / p.sumIndex2) ;
//snippet ends
p.sumIndex1 -= v.g;
p.sumIndex2 -= v.h;
return p;
},
我尝试在从回调方法中删除记录之前和之后添加 snippet，但它们都不起作用
I have tried adding the snippet before and after the removal of records from the callback method, but neither of them work
欢迎所有方法/建议
推荐答案
没有一个可行的例子很难说，但我认为你的问题是在你的 add 函数中你添加了 "p.sumIndex2 += vh" 而在你的删除您正在减去p.sumIndex2 -= vg"的函数.所以你的 sumIndex2 并没有真正跟踪任何特定的值.您应该在其中添加和减去相同的内容，以便添加和删除记录不会产生任何变化.
Hard to say without a working example, but I think your problem is that in your add function you are adding "p.sumIndex2 += v.h" while in your remove function you are subtracting "p.sumIndex2 -= v.g". So your sumIndex2 isn't really tracking any specific value. You should add and subtract the same thing from it so that adding a record and then removing it results in no change.
此外，您应该在删除记录时重新计算平均值，而不仅仅是在添加记录时.应用过滤器后，您的平均值将是错误的.
Additionally, you should recalculate your average value when you remove records, not just when you add them. Your average is going to be wrong after filters are applied.
我还建议您只创建您需要的所有三个组以及带有默认组的条形图.然后将条形图上的组切换出来，并在要显示的组发生变化时重新渲染.
I'd also recommend just creating all three groups you need and the bar chart with the default group. Then switch out the group on the bar chart and rerender it when the group you want to display changes.
这篇关于直流交叉滤波器不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
