直流交叉滤波器不工作
Dc cross-filter not working
使用dc &在这里交叉过滤js库,但在可视化中遇到了一个非常奇怪的问题。
我的可视化是5个柱状图,它们使用dc和交叉过滤器js库相互连接。
因此,有简单指标, 计算指标(%)和最后计算指标(不含%)。对于这三种类型,代码的每个部分有三种不同类型的if-else(对于5个条形图)但是,问题在于最后一个if-else,这里的交叉过滤器出错,我们在几个选择之后得到负值,所有条形图都从x轴上移除。这太奇怪了,我不明白这是怎么回事。(参考下图)
在第二个if-else和第三个if-else中有相同的代码片段,但是第三个if-else搞砸了交叉过滤的功能。有人能解释一下这里出了什么问题吗?
代码: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
更新:好的,在答案的帮助下,我修改了我的代码如下,负条消失了,但仍然只有初始视图是正确的。在此之后,如果我选择任何要过滤所有图表的条形图,则不会发生过滤。图表不再改变。
代码#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;
},
我尝试在从回调方法中删除记录之前和之后添加片段,但它们都不起作用
欢迎所有的方法/建议
没有工作示例很难说,但我认为你的问题是,在你的添加函数中,你添加了"p.sumIndex2 += v.h",而在你的删除函数中,你减去了"p.sumIndex2 -= v.g"。所以你的sumIndex2并没有跟踪任何特定的值。您应该在其中添加和减去相同的内容,以便添加记录然后删除它不会导致任何更改。
另外,您应该在删除记录时重新计算平均值,而不仅仅是在添加记录时。使用过滤器后,你的平均值将是错误的。
我还建议只创建您需要的所有三个组,并使用默认组创建条形图。然后切换出条形图上的组,并在要显示的组发生更改时重新呈现。
相关文章:
- Javascript:selenium Web驱动程序isDisplayed()不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours()工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 正在尝试使用if和else添加类,但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- JS可以在Chrome中工作,但不能在Firefox中工作
- AngularJS “ng-repeat |滤波器:..“没有像我预期的那样工作(不显示任何数据)
- 多维交叉滤波器不工作
- 直流交叉滤波器不工作