dc.js - Crossfilter 维度和组以过滤掉低于特定阈值的数据

Question

我有以下数据，我正在尝试绘制 2 个条形图:

• 给定类型的总单位数
• 低于 2.0 版的单元

两个图表中的 x 轴是单位类型。

图表很好。问题是:

当我选择第二个图表上的条形时，我希望在数据表和第一个图表中仅看到版本 < 2.0 的单位，即在这种情况下为一条记录。但我得到的是该特定类型的所有单位(如果我单击第一个图表中的条形图，这是我所期望的)，即 3 条记录。

参见 http://jsfiddle.net/y1o52tk4/6/

我想问题在于我如何对版本图表进行分组:

var versionGroup = type1Dim.group().reduceSum(dc.pluck('version_count'));

数据:

var data = [{
         "version": 1.0,
         "serial": '1A',
         "type": "a"
},{
         "version": 2.0,
         "serial": '2A',
         "type": "a"
},{
         "version": 2.0,
         "serial": '2AA',
         "type": "a"
},{
         "version": 2.0,
         "serial": '2B',
         "type": "b"
},{
         "version": 2.5,
         "serial": '25B',
         "type": "b"
},{
         "version": 1.0,
         "serial": '1B',
         "type": "b"
}];

Answer 1

如上面的评论所述，但让我们把它拼出来并澄清几件事。

您可以使用复合键，然后使用“假组”过滤组，就像您在上面更新的 fiddle 中所做的那样，以获得这种效果。这可能是最通用和最稳定的方法，无需进行任何 UI 修改。

然而，关于交叉过滤器键的理解是，它总是将它们强制转换为值。所以如果你想要一个复合键，最好自己将它构造为一个字符串，因为如果你将它作为一个数组传递，crossfilter 会将它强制转换为一个字符串并给你一个与 , 的连接- 它可以工作，我知道 dc.js 散点图可以做到这一点，但我不推荐它。它的效率低于自己创建字符串(因为您只会创建一次，而不是在交叉过滤器内部发生)，而且您有更多的控制权。

这是与 Jason Davies 的长时间讨论，它说服了我: https://github.com/square/crossfilter/pull/48

所以这是你的 fiddle 的字符串连接复合键版本。

首先是复合键:

    var type1Dim = ndx.dimension(function(d){
                            if(d.version<2.0)
                                return '1.' + d.type;
                            else
                                return '2.' + d.type;});

(最简单的分隔符是 '\x0' 但 '.' 在这里工作正常。)

接下来，一个简单的 key 访问器:

    .keyAccessor(function(d) {return d.key;})

我们也让 dc.js 推断序数尺度的域:

    .x(d3.scale.ordinal());

它有效，但现在滴答声有丑陋的复合键。要解决这个问题:

    versionChart.xAxis().tickFormat(function(d) {
        return d.split('.')[1];
    });

我的 fork :http://jsfiddle.net/gordonwoodhull/y09cok1z/4/

编辑:我忘记更新假组生成器，这在这里并不重要，但一般来说，它也应该拆分 key :

function removeVersion2(source_group) {
    return {
        all:function () {
            return source_group.all().filter(function(d) {
                return d.key.split('.')[0] != 2;
            });
        }
    };
}