dc.js-从多个列创建折线图并启用过滤 [英] dc.js - Creating a row chart from multiple columns and enabling filtering

问题描述

这类似于 dc.js -如何从多个列创建行图，但我想更进一步，并在单击行时启用过滤。

This is similar to dc.js - how to create a row chart from multiple columns but I want to take it a step further and enable filtering when the rows are clicked.

问题应该过滤什么？ -仅显示值> 0的记录。例如，单击行'a'时，将仅显示值> 0的记录。因此，类型饼图将更改为foo：1，bar：2

To answer the question "What is it supposed to filter?" - Only show records with value > 0. For example when Row 'a' is clicked it will only show records with value for a > 0. Hence, the Type pie chart will change to foo:1, bar:2

我想我必须覆盖onClick方法吗？但我不知道如何。

I guess I have to overwrite onClick method? But I am not sure how.

chart.onClick = function（d）{}

jsfiddle来自上述问题的答案- http：// jsfiddle.net/gordonwoodhull/37uET/6/

jsfiddle from the answer to the above question - http://jsfiddle.net/gordonwoodhull/37uET/6/

有什么建议吗？

谢谢！ / p>

Thanks!

推荐答案

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

Okay, here's a solution where if a record has values > 0 for any of the selected rows, that record is included. As @Ethan said, it's a matter of defining a filter handler:

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仅有权访问键，因此我们将整个记录作为键传递。在现实世界中，这没有什么意义，但是由于我们已经在横向使用交叉滤镜，所以可能很好：

Also, since the filterFunction only has access to the key, we pass the entire record through as the key. This doesn't make a whole lot of sense in the "real world" but since we're already using crossfilter sideways, it is probably fine:

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

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

BTW听起来您只想选择一次一行。操作方法如下：

BTW it sounds like you want to only select one row at a time. Here's how to do that:

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

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

(This will be simpler in dc 2.1 on the develop branch, where the charts use the result of the filter handlers instead of requiring you to modify the filters in place; the body becomes just return [filter];)

这篇关于dc.js-从多个列创建折线图并启用过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！