交叉过滤器正确过滤数据的问题答案

【问题标题】：Problems with crossfilter filtering data correctly交叉过滤器正确过滤数据的问题
【发布时间】：2019-01-18 14:51:36
【问题描述】：

我正在使用交叉过滤器将数据输入到 dc.js。我不确定问题出在哪里，但我怀疑交叉过滤器。我遇到的问题是，有时当您在图形上使用过滤器时，它会在第二个正确呈现。但有时，根据所选组，每个图表都会呈现与过滤器不匹配的数据。考虑随附的屏幕截图

这是图表正确呈现所有数据的基本状态 .

这是我使用底部图表进行过滤的地方。从顶部图表过滤时也是如此——数据正确显示、渲染

现在事情变得很时髦。第一张图是我使用底部图过滤时（注意额外的行显示为活动/突出显示），第二张图是我使用顶部图过滤时。根据我选择的项目，它们在另一张图中以不同的方式被歪曲。

对我来说，这似乎是交叉过滤器的问题，但我不确定。我将 onChange 回调添加到 crossfilter 并设置了一个调试器；当操作被“过滤”并且它似乎数据是正确的但它没有正确呈现时。所以，我不知道。

这是我正在使用的代码（分解版本）。它是更大组件的一部分，但这是我构建图表的地方。请注意，这是我的数据集的截断版本。所以不会让我包括所有这些。

dataset = [{"name":"Test 52718","quantity":"14"},{"name":"Test 52717","quantity":"20"},{"name":"Test 52716","quantity":"15"},{"name":"Test 52715","quantity":"46"},{"name":"Test 52714","quantity":"18"},{"name":"Test 52713","quantity":"29"},{"name":"Test 52712","quantity":"21"},{"name":"Test 52711","quantity":"27"},{"name":"Test 52709","quantity":"10"},{"name":"Test 52710","quantity":"40"},{"name":"Test 52708","quantity":"13"},{"name":"Test 52707","quantity":"22"},{"name":"Test 52706","quantity":"15"},{"name":"Test 52705","quantity":"13"},{"name":"Test 52704","quantity":"14"},{"name":"Test 52703","quantity":"40"},{"name":"Test 52702","quantity":"41"},{"name":"Test 52701","quantity":"32"},{"name":"Test 52700","quantity":"11"},{"name":"Test 52699","quantity":"8"},{"name":"Test 52698","quantity":"24"},{"name":"Test 52697","quantity":"25"},{"name":"Test 52696","quantity":"24"},{"name":"Test 52695","quantity":"49"},{"name":"Test 52694","quantity":"17"},{"name":"Test 52693","quantity":"15"},{"name":"Test 52692","quantity":"28"},{"name":"Test 52691","quantity":"29"},{"name":"Test 52690","quantity":"47"},{"name":"Test 52689","quantity":"22"},{"name":"Test 52688","quantity":"38"},{"name":"Test 52687","quantity":"39"},{"name":"Test 52686","quantity":"35"},{"name":"Test 52685","quantity":"29"},{"name":"Test 52684","quantity":"5"},{"name":"Test 52683","quantity":"17"},{"name":"Test 52682","quantity":"46"},{"name":"Test 52681","quantity":"23"},{"name":"Test 52680","quantity":"5"},{"name":"Test 52679","quantity":"14"},{"name":"Test 52678","quantity":"37"},{"name":"Test 52677","quantity":"46"},{"name":"Test 52676","quantity":"37"},{"name":"Test 52675","quantity":"48"},{"name":"Test 52674","quantity":"13"},{"name":"Test 52673","quantity":"13"},{"name":"Test 52672","quantity":"42"},{"name":"Test 52671","quantity":"14"},{"name":"Test 52670","quantity":"37"},{"name":"Test 52669","quantity":"30"},{"name":"Test 52668","quantity":"28"},{"name":"Test 52667","quantity":"40"},{"name":"Test 52666","quantity":"12"},{"name":"Test 52665","quantity":"8"},{"name":"Test 52664","quantity":"38"},{"name":"Test 52663","quantity":"47"},{"name":"Test 52662","quantity":"27"},{"name":"Test 52661","quantity":"18"},{"name":"Test 52660","quantity":"25"},{"name":"Test 52658","quantity":"46"},{"name":"Test 52659","quantity":"46"},{"name":"Test 52657","quantity":"26"},{"name":"Test 52656","quantity":"46"},{"name":"Test 52655","quantity":"20"},{"name":"Test 52654","quantity":"16"},{"name":"Test 52653","quantity":"50"},{"name":"Test 52652","quantity":"12"},{"name":"Test 52651","quantity":"43"},{"name":"Test 52650","quantity":"22"},{"name":"Test 52649","quantity":"32"},{"name":"Test 52648","quantity":"5"},{"name":"Test 52647","quantity":"27"},{"name":"Test 52646","quantity":"14"},{"name":"Test 52645","quantity":"15"},{"name":"Test 52644","quantity":"13"},{"name":"Test 52642","quantity":"37"},{"name":"Test 52641","quantity":"27"},{"name":"Test 52640","quantity":"31"},{"name":"Test 52639","quantity":"22"},{"name":"Test 52638","quantity":"48"},{"name":"Test 52637","quantity":"49"},{"name":"Test 52636","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52635","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52634","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52633","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52632","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52631","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52630","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52629","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52628","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52627","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52626","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52625","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52624","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52623","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52622","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52621","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52620","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52619","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52618","quantity":"[ EMPTY VALUE ]"}]

然后是我的代码主体

graphCrossfilter = crossfilter(dataset);
dimension = graphCrossfilter.dimension(function (d) {return d.quantity});
group = dimension.group().reduceCount();

rowChart = dc.rowChart("#rowChart" , 'DataGraphs')
  .height(700)
  .width(500)
  .x(d3.scale.linear().domain(d3.extent(aData, function (d) {return d.quantity})))
  .transitionDuration(0)
  .elasticX(true)
  .dimension(oDimension)
  .group(oGroup);

barChart = dc.barChart("#barChart", 'DataGraphs')
  .height(400)
  .width(400)
  .outerPadding(0.05)
  .barPadding(0.05)
  .renderHorizontalGridLines(true)
  .renderVerticalGridLines(true)
  .elasticX(true)
  .elasticY(true)
  .brushOn(true)
  .transitionDuration(0)
  .x(d3.scale.ordinal())
  .xAxisLabel('Text Field')
  .xUnits(dc.units.ordinal)
  .yAxisLabel('Count')
  .dimension(dimension)
  .group(group);

graphCrossfilter.onChange(function(changeAction) {
  if (changeAction === "filtered") {
    debugger;
  }
});

如果有人能给我一些想法和/或我可以在哪里尝试找出发生了什么，我将非常感激。

谢谢，克里斯托夫

【问题讨论】：

嗯，它对我有用，我所做的只是定义 oDimension 和 oGroup 与 dimension 和 group 相同：jsfiddle.net/gordonwoodhull/3wntk5az/21
可能@Ethan 是对的，这个数据样本没有the nulls or whatever they are。
我们必须查看oDimension 的定义才能确定，但我的猜测是它使用+d.quantity 转换为数字，而+"[ EMPTY VALUE ]" 被转换为NaN。但只是猜测。

标签： dc.js crossfilter

【解决方案1】：

Crossfilter 维度访问器返回的值必须是自然排序的。在我看来，您的维度正在为未填充数据的某些记录返回非数字值。发生这种情况时，您经常会看到您所描述的过滤问题。尝试在维度访问器中测试缺失数据并在这种情况下返回 0。

【讨论】：