Question

使用dc＆amp; amp;构建grails应用程序这里交叉过滤js库，但在某种程度上在可视化中遇到了一个非常奇怪的问题。

我的可视化是5个条形图，它们使用直流和交叉过滤器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;
     },

我尝试在从回调方法中删除记录之前和之后添加代码段，但它们都不起作用

欢迎所有方法/建议

Answer 1

很难说没有一个有效的例子，但我认为你的问题是在你的添加功能中你要添加＆＃34; p.sumIndex2 + = v.h＆＃34;在你的删除功能中，你正在减去＆＃34; p.sumIndex2 - = v.g＆＃34;。因此，您的sumIndex2并非真正跟踪任何特定值。您应该从中添加和减去相同的内容，以便添加记录然后删除它不会导致任何更改。

此外，您应该在删除记录时重新计算平均值，而不仅仅是在添加记录时。应用过滤器后，您的平均值会出错。

我还建议您只创建所需的所有三个组，并使用默认组创建条形图。然后在条形图上关闭组，并在要显示的组发生更改时重新渲染。

Dc交叉过滤器无法正常工作

1 个答案: