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

Posted 2023-02-22

【中文标题】DC.js 数据表的自定义文本过滤器

【英文标题】：Custom Text filter for DC.js dataTable

【发布时间】：2014-09-24 20:14:21

【问题描述】：

我正在构建一个仪表板来显示一些数据。我有几个图表和一个列出所有数据的表格。我正在尝试添加搜索功能来过滤图表。我有一堆公司和一些关于每个公司的数据。因此，如果我搜索“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);

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

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

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

任何帮助将不胜感激。

编辑：

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

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

【问题讨论】：

如果可能的话，最好能有一个小提琴来看看这个。

这是一个小提琴jsfiddle.net/rbristow/HW52d/1

其实总重置正确到底是什么问题，请给个截图。

好问题，好答案。很高兴看到一个交叉过滤器实用程序。

【参考方案1】：

在这个区块中：

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

说明：

在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 中，而应该不理会它们。

按位异或的用法很奇怪。我在 SO 上查找了这个，Why is there no logical xor in JavaScript? 的最高投票答案包含“按位异或非常有用，但在我多年的编程中，我从来不需要逻辑异或。”鉴于crossfilter.js 强调性能，他们可能会放弃一些错误检查并希望使用快速的“数学”运算。

【讨论】：

在 Crossfilter 1.3.8 版中修复。

为了使过滤器对输入框中包含子字符串的任何字符串起作用，您可以将return 0 == d.search(re);修改为return -1 != d.search(re);。否则，过滤器只返回以您输入的子字符串开头的项目。