Question

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

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

 $("#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()。当我检查维度中的数据时，在每个过滤器之前和之后它是正确的，其他图表似乎没有正确处理它。

我已尝试直接向dc dataTable添加基本过滤器，但我无法使用自定义过滤器功能。所以我可以做一些像dashTable.filter(q)这样的工作，但它必须给它整个公司名称才能显示任何内容，但是当我应用它并删除它时，图表会正确呈现。我尝试使用dashTable.filterHandler()，但它总是会返回错误，但如果您知道如何使其工作，我会很好奇，因为即使使用示例我也无法使其运行在dc.js的文档中。

非常感谢任何帮助。

编辑：

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

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

Answer 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正在被字符串xor-ed - 注意，这是按位xor，不符合逻辑，因为Javascript缺少逻辑xor - 它总是会计算为{{1价值。因此，过滤后的数据集中所需的值会被放入true，而这些值应单独存放。

这是一个奇怪的使用按位xor。我在SO上看了这个问题，对Why is there no logical xor in JavaScript?的最高投票回答包含“Bitwise XOR非常有用，但在我多年的编程中，我从未需要逻辑异或。”鉴于added强调性能，他们可能会删除一些错误检查，并希望使用快速的“mathy”操作。

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

1 个答案: