【问题标题】:Crossfilter and D3: Filter by group AND dimension交叉过滤器和 D3:按组和维度过滤
【发布时间】:2014-10-21 15:18:56
【问题描述】:

我尝试使用crossfilter 在维度和组上同时过滤我的数据。 比如说,我希望能够在我的“byCylinders”维度上filterExact,同时过滤我的groupByBrand 组的值(按品牌名称减少汽车数量)。 (选中两个复选框)。

查看代码: http://jsbin.com/xajuc/2/watch?js,output

我看到的问题是我没有同时识别两个过滤器,或者我不明白如何正确绑定d3.data()

我知道我可以创建一个新的“临时”维度,但由于维度很昂贵,这可能不是最好的方法。..

有什么想法吗?

【问题讨论】:

    标签: javascript d3.js dc.js crossfilter


    【解决方案1】:

    问题不在于您使用交叉过滤器,而在于您的 d3 显示器。由于您没有使用交叉过滤器进行品牌过滤,因此应该可以使用该维度来获取结果(但是,它不会在同一维度上观察到任何 dimension.filter)。

    问题是您没有针对已更改但未删除的 bin 的更新步骤。 Crossfilter 不会自动删除包含 0 个项目的垃圾箱,因此垃圾箱的实际数量不会因您的byCylinders.filter 而改变,只会改变大小。因此,仅单击圆柱复选框时没有进入或退出 - 只有另一个过滤器实际删除了垃圾箱。

    所以通过在插入后添加更新步骤,可以看到数字的变化:

     var result = d3.select("body")
          .select("div#result")
          .selectAll("div")
          .data(resultData);
      result.enter()
          .append("div");
      result
          .text(function(d){
              return d.key + " : " + d.value + " cars found";});
    

    这利用了.enter() 中的项目在处理后立即可供更新的事实。

    http://jsbin.com/qesafu/2/edit

    【讨论】:

    • 谢谢,绝对有道理。我知道将 D3 收集过滤器与交叉过滤器混合可能不是最好的选择。 “干净”的版本会是什么样子(例如,对两个过滤器都使用交叉过滤器)?
    • 实际上,我认为您正在尽最大努力 - 我认为 crossfilter 不会打扰那种过滤(在减少的值上),因为它很容易和有效地完成显而易见的方式。如果您使用的是 dc.js,您可以使用 fake group pattern 来包装您的逻辑,并确保在图表拉动时调用它。
    【解决方案2】:

    您可以将数据以 .json 格式引入,压缩各种数据元素,并将 .data() 传递给整个数据集。我认为以下内容也适用于您的过滤器。我将解释这一点,就像您将数据(不一定是过滤的)作为一个整体引入一样。希望这将阐明如何将 .data() 用于 d3 中的关联数据。

    data.json 示例:

    {
        "property1":[0, 0, 0, 0],
        "property2":['name1', 'name2', 'name3', 'name4']
    }
    

    以 .json 格式引入数据:

    d3.json("data.json", function(data) { 
    
        // zip the two (or more) attributes of your data 
        data = d3.zip(data.property1, data.property2).map(function(d) { 
            property1 = +d[0];
            property2 = +d[1];
    
            // return object for each property
            return {prop1: property1, prop2: property2};
        });
    
    }
    

    然后 .data() 可以得到那个 zip:

    .data(data)
    

    您一次只能调用一个数据属性:

    // histogram example
    d3.layout.histogram()
        .bins()
        .value( function(d) { return d.attr1; })
        (data)
    

    你看到.value 是如何只返回 zip 的一个属性的吗?但其他属性仍然关联。您可以拥有多个属性,将一些属性用于您可能正在执行的任何计算,然后将其他属性用作这些数据属性的元数据,因为它们都被压缩在一起,为您提供了一个不错的小包。

    另一种选择是将一个数组/数据传递给 .data() 并为另一个使用索引。

    此处列出的两个选项:

    d3 array input line graph example

    这里有前者的详细例子:

    http://bl.ocks.org/patrickberkeley/9162034

    我认为这些概念就是您所追求的。让我知道我是否错了。

    【讨论】:

    • 谢谢,但不完全是——我知道如何在 D3 中加载数据,从字符串解析 CSV 只是为了这个 jsbin 示例。这个问题确实与交叉过滤器(square.github.io/crossfilter)和 D3 有关。 DC.js (dc-js.github.io/dc.js) 可能会这样做,但我不想在这里使用它...
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-01-11
    • 2014-06-23
    • 1970-01-01
    • 1970-01-01
    • 2012-10-05
    • 2023-03-03
    • 2012-09-23
    相关资源
    最近更新 更多