首页 文章

DC.js dataTable的自定义文本过滤器

提问于
浏览 次
8

我正在构建一个仪表板来显示一些数据 . 我有几个图表和一个列出所有数据的表格 . 我正在尝试添加搜索功能来过滤图表 . 我有很多公司和一些关于每个公司的数据 . 因此，如果我搜索“Appl”，只有以“Appl”开头的公司将列在数据表中，图表将反映这一点 .

我对当前实现的唯一问题是当我更改此过滤器或清除它时 . 数据似乎很好，但图表渲染不正确 . 清除后它们不会返回原始位置，或者以某种方式添加额外数据 . 任何提示将不胜感激 .

$("#table-search").on('input',function(){
   text_filter(companyDimension,this.value);//companyDimension is the dimension for the data table

function text_filter(dim,q){
 dashTable.filterAll();
 var re = new RegExp(q,"i")
 if (q!='')
 {
    dim.filter(function(d){
        if (d.search(re)==0)
            return d;
    });
}
dc.redrawAll();
graphCustomizations();  }});

dc.js代码

var ndx = crossfilter(resource_data);
//Dimensions 
companyDimension = ndx.dimension(function(d){
    return d["Company Name"]
});
dashTable.width(800).height(800)
    .dimension(companyDimension)
    .group(function(d){
        return "List of all Selected Companies";
    })
    .size(1774)
    .columns([
            function(d){return d["Company Name"]; },
            function(d){return d["Revenue Source"];},
            function(d){return d["Commodity"];},
            function(d){return "$"+parseFloat(d["Revenue"]).formatMoney(0,'.',',');}
        ])
    .sortBy(function(d){return d["Company Name"]})
    .order(d3.ascending);

就是这样，图表只是在同一个crossfilter对象上过滤不同的维度 .

我已经尝试过对text_filter函数做了几件事，比如， dim.filterAll() ， dim.filter(null) ， dc.renderAll() . 当我检查维度中的数据时，在每个过滤器之前和之后它是正确的，其他图表似乎没有正确处理它 .

我've tried adding a basic filter to the dc dataTable directly, but I can' t使用自定义过滤器功能 . 所以我可以做 dashTable.filter(q) 之类的东西，它会起作用，但我必须给它整个公司名称才能显示任何内容，但是当我应用它并删除它时，图表会正确呈现 . 我尝试过使用 dashTable.filterHandler() 但它总是会返回一个错误，但如果你知道如何让它工作，我会很好奇，因为我无法提供文档 .

任何帮助将不胜感激 .

编辑：

这里是大部分完整代码的小提琴，我将一些代码混杂在一起以使其正常工作 . http://jsfiddle.net/rbristow/HW52d/1/

要重现该错误，请在搜索框中输入一个字母然后清除它并输入另一个字母，您可以看到总数未正确重置 .

javascript d3.js dc.js crossfilter

1 回答

  • 8

    在这个块中：

    if (q != '') {
    dim.filter(function(d) {
        if (d.search(re) == 0)
            return d;
    });
}

    您的过滤器需要是：

    dim.filter(function(d) { return 0 == d.search(re); });

    但是，如果 q == '' ，那么你不应该对 dim 应用任何过滤器

    if (q != '') {
    dim.filter(function(d) {
        return 0 == d.search(re);
    });
} else {
    dim.filterAll();
}

    Explanation:

    在 crossfilter.js 中，过滤器回调的返回值将按如下方式进行测试：

    if (!(filters[k = index[i]] & one) ^ (x = f(values[i], i))) {
    if (x) filters[k] &= zero, added.push(k);
    else filters[k] |= one, removed.push(k);
}

    如果过滤器返回 true 并且该项目已在当前视图中，则它不应该执行任何操作 . true ^ true -> false .

    但是在你的情况下， true 正在被字符串xor-ed - 注意，这是按位xor，而不是逻辑，因为Javascript缺少逻辑xor - 它总是会计算为 true 值 . 因此，过滤集中所需的值将被放入 added ，因为它们应该保持不变 .

    这是一个奇怪的使用按位xor . 我在SO上看了这个，并且Why is there no logical xor in JavaScript?的最高投票回答包含"Bitwise XOR is extremely useful, but in all my years of programming I have never needed a logical XOR."鉴于 crossfilter.js 强调性能可能会丢弃一些错误检查并希望使用快速"mathy"操作 .

    回复于

相关问题