自定义文本过滤器DC.js数据表

Custom Text filter for DC.js dataTable

本文关键字：js 数据表 DC 过滤器 文本 文本过滤 自定义      更新时间：2023-09-26

我正在构建一个仪表板来显示一些数据。我有几个图表和一个列出所有数据的表格。我正试图添加搜索功能来过滤图表。我有很多公司，每家公司都有一些数据。因此，如果我搜索"apple"，只有以"apple"开头的公司会出现在数据表中，图表也会反映出这一点。

当前实现的唯一问题是当我更改此过滤器或清除它时。数据似乎很好，但图表显示不正确。它们在清仓后不会回到原来的位置，或者以某种方式添加了额外的数据。如有任何建议，我将不胜感激。

 $("#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);

就是这样，图表只是在同一个交叉过滤对象上用不同的维度进行过滤。

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

我试过直接向dc dataTable添加一个基本的过滤器，但是我不能让它与自定义过滤器函数一起工作。所以我可以做像dashTable.filter(q)这样的事情，它将工作，但是我必须给它整个公司名称，以便它显示任何东西，但是当我应用它并删除它时，图表呈现正确。我试过使用dashTable.filterHandler()，但它总是返回一个错误，但如果你知道如何让它工作，我会很好奇，因为我不能让它的功能，即使在dc.js的文档中的例子。

任何帮助都将是非常感激的。

编辑:

这是一堆最完整的代码，我把一些代码混在一起让它工作。http://jsfiddle.net/rbristow/HW52d/1/

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

在此块中:

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

你的过滤器需要是:

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

但是，你没有对dim应用任何滤镜如果q == ''，那么它应该是

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

解释:

在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正在用字符串进行异或处理——注意，这是位异或，而不是逻辑异或，因为Javascript缺乏逻辑异或——它将始终计算为true值。所以你想要在你的过滤集的值被放入added时，他们应该单独留下。

这是一个奇怪的按位xor用法。我在SO上查了一下，票数最高的答案是为什么JavaScript中没有逻辑xor ?包含"按位异或非常有用，但在我多年的编程生涯中，我从来没有需要过逻辑异或。"考虑到crossfilter.js强调性能，他们可能会放弃一些错误检查，并希望使用快速的"数学"操作。

相关文章：