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

问题描述

我正在建立一个仪表板来显示一些数据。我有几个图表和一个表列出所有的数据。我想添加搜索功能来过滤图表。我有一堆公司和一些数据。因此，如果我搜索应用程序，只有以应用程序开头的公司将列在数据表中，图表将反映这一点。

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

  $（＃table-search）。on（'input'，function 
 text_filter（companyDimension，this.value）; // companyDimension是数据表的维数
 
 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）; 
 //尺寸
 companyDimension = ndx.dimension（function（d）{
 return d [Company Name] 
}）; 
 dashTable.width（800）.height（800）
 .dimension（companyDimension）
 .group（function（d）{
 return b $ b}）
 .size（1774）
 .columns（[
 function（d）{return d [Company Name];}，
 function {return d [Revenue Source];}，
 function（d）{return d [Commodity];}，
 function（d）{return$+ parseFloat Revenue]）。formatMoney（0，'。'，'，'）;} 
]）
 .sortBy（function（d）{return d [Company Name]}）$ b $ （d3.ascending）; 
  

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

我已经尝试过对text_filter函数做了几个事情，例如 dim.filterAll（）， dim.filter（null）， dc.renderAll（）。当我检查维度中的数据，它是正确的前后每个过滤器，其他图表似乎没有处理它正确。

我已经尝试直接向dc dataTable添加一个基本过滤器，但是我无法使用自定义过滤器功能。所以我可以做一些像 dashTable.filter（q）它会工作，但我必须给它的整个公司名称，它显示任何东西，但图表呈现正确地，当我应用它，并删除它。我尝试使用 dashTable.filterHandler（）但它总是返回一个错误，但如果你知道如何让它工作，我会很好奇，因为我'

任何帮助都将非常感激。

编辑：

这里是一个大部分完整的代码的小提琴，我混淆了一些代码，使它工作。

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

解决方案

在此区块中：

  if（q！=''）{
 dim.filter（function（d）{
 if（d.search（re）== 0）
 return d; 
}）; 
} 
  

您的筛选器必须为：

  dim.filter（function（d）{return 0 == d.search（re）;}）; 
  

但是，您没有对 dim if q ==''所以应该是

  if（q！=''）{
 dim.filter（function（d）{
 return 0 == d.search（re）; 
}）; 
} else {
 dim.filterAll（）; 
} 
  

说明： b

在 crossfilter.js 中，您的过滤器回调的返回值是这样测试的：

  if（！（filters [k = index [i]]& one）^（x = f（values [i]，i）））{
 if x）filter [k]& = zero，added.push（k）; 
 else filters [k] | = one，removed.push（k）; 
} 
  

如果过滤器返回 true 并且项目已经在当前视图中，它不应该做任何事情。 true ^ true - > false 。

但在你的情况下， true string - 注意，这是按位xor，不合逻辑，因为Javascript缺少逻辑xor - 这将总是评估为一个 true 值。因此，您想要在过滤的集合中的值将被放入添加时应该单独使用。

一个奇怪的使用位xor。我查看了这个和SO顶部投票的答案包含位XOR是非常有用的，但在我所有的编程年代，我从来没有需要一个逻辑XOR。鉴于 crossfilter.js 强调性能，可能会抛弃一些错误检查，并希望使用快速的mathy操作。

I'm building a dashboard to show some data. I have several charts and a table listing all of the data. I'm trying to add search functionality to filter the chart. I have a bunch of companies and some data about each. So if I search for "Appl" only companies that start with "Appl" will be listed in the data table and the charts will reflect this.

The only issue I have with the current implementation is when I change this filter or clear it. The data seems fine, but the charts render incorrectly. They don't return to their original positions when cleared, or they add extra data somehow. Any tips would be appreciated.

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

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);

That's about it, the charts are just filtering with different dimensions on the same crossfilter object.

I've tried doing several things to the text_filter function such as, dim.filterAll(), dim.filter(null), dc.renderAll(). When I inspect the data in the dimension, it is correct before and after each filter, the other charts just don't seem to be handling it correctly.

I've tried adding a basic filter to the dc dataTable directly, but I can't get it to work with a custom filter function. So I can do something like dashTable.filter(q) and it will work, but I have to give it the entire company name for it to display anything, but the charts render correctly when I apply it and remove it. I've tried using dashTable.filterHandler() but it always returns an error, but if you know how to get that to work, I would be curious, because I couldn't get it to function even with the example in dc.js's documentation.

Any help would be greatly appreciated.

EDIT:

Here's a fiddle of the mostly complete code, I jumbled some code together to get it working. http://jsfiddle.net/rbristow/HW52d/1/

To reproduce the bug, enter a letter in the search box then clear it and enter another letter, you can see the total not resetting correctly.

解决方案

In this block:

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

Your filter needs to be:

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

But then, you're not applying any filter to dim if q == '' so it should be

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

Explanation:

In crossfilter.js the return value of your filter callback is tested like this:

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);
}

If the filter returns true and the item is already in the current view, it's not supposed to do anything. true ^ true -> false.

But in your case, true is being xor-ed with a string -- note, this is bitwise xor, not logical, as Javascript lacks a logical xor -- which will always evaluate to a true value. So the values you want in your filtered set are being put into added when they should be left alone.

It's an oddball use of a bitwise xor. I looked this up on SO and the top voted answer to Why is there no logical xor in JavaScript? contains "Bitwise XOR is extremely useful, but in all my years of programming I have never needed a logical XOR." Given that crossfilter.js emphasizes performance maybe they drop some error checks and want to use fast "mathy" operations.

这篇关于用于DC.js数据表的自定义文本过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！