dc.js - 从多列创建行图并启用过滤答案

【问题标题】：dc.js - Creating a row chart from multiple columns and enabling filteringdc.js - 从多列创建行图并启用过滤
【发布时间】：2015-12-15 20:42:03
【问题描述】：

这类似于dc.js - how to create a row chart from multiple columns，但我想更进一步，并在单击行时启用过滤。

回答“它应该过滤什么？”这个问题。 - 仅显示值 > 0 的记录。例如，当单击“a”行时，它将仅显示值 > 0 的记录。因此，类型饼图将更改为 foo:1, bar:2

我想我必须覆盖 onClick 方法？但我不确定如何。

chart.onClick = function(d) {}

上述问题的答案中的jsfiddle - http://jsfiddle.net/gordonwoodhull/37uET/6/

有什么建议吗？

谢谢！

【问题讨论】：

我认为您需要覆盖过滤器处理程序。

标签： dc.js crossfilter

【解决方案1】：

好的，这是一个解决方案，如果记录的任何选定行的值 > 0，则包含该记录。正如@Ethan 所说，这是定义过滤器处理程序的问题：

sidewaysRow.filterHandler(function(dim, filters) {
    if(filters && filters.length)
        dim.filterFunction(function(r) {
            return filters.some(function(c) {
                return r[c] > 0;
            });
        })
    else dim.filterAll();
    return filters;
});

此外，由于 filterFunction 只能访问键，因此我们将整个记录作为键传递。这在“现实世界”中没有多大意义，但由于我们已经在横向使用交叉过滤器，它可能没问题：

var dim = ndx.dimension(function(r) { return r; });

新版小提琴：https://jsfiddle.net/gordonwoodhull/b7cak6xj/

顺便说一句，听起来您一次只能选择一行。这样做的方法如下：

sidewaysRow.addFilterHandler(function(filters, filter) {
  filters.length = 0;
  filters[0] = filter;
  return filters;
})

（在开发分支上的 dc 2.1 中这会更简单，其中图表使用过滤器处理程序的结果，而不是要求您就地修改过滤器；主体变为 return [filter];）

【讨论】：