单击数据表以筛选其他图表 (dc.js)

Question

当我点击数据表中的一行时，我需要过滤其他图表。

我做到了

my_table.on('pretransition', function (table) {
     table.selectAll('td.dc-table-column')
          .on('click',function(d){
                table.filter(d.key)
                dc.redrawAll();
           })
});

但其他图表没有任何反应。

你能帮帮我吗？

Answer 1

如果 table 维度是维度...

通常填充数据 table 的数据是原始数据集中的原始行，而不是 key/value 对。

所以很可能 d.key 未定义。

我劝你先坚持

console.log(d)

进入您的点击处理程序以查看您的数据，以确保 d.key 有效。

其次，请记住图表通过其维度进行过滤。因此，您需要向 table.filter() 传递一个值，该值是您维度的有效键，然后它将过滤掉键不同的所有行。这可能不仅仅是您选择的一行。

通常选择 table 维度是因为它对行值进行排序的方式。您可能实际上想要过滤其他一些维度。但希望这足以让您入门。

但是如果 table 维度是一个组呢？

只有当您的 table 将交叉过滤器维度作为其维度时，上述技术才有效。如果像您在评论中链接的 fiddle 一样，您使用一个组作为维度，则该对象没有 .filter() 方法，因此 table.filter() 方法不会执行任何操作.

如果你只需要过滤被点击的一项，你可以

foodim.filter(d.key)

这个有效果，但用处不大。

如果您需要 dc 的序号图表中使用的切换功能，则需要模拟它。没那么复杂:

// global
var filterKeys = [];

// inside click event

                if(filterKeys.indexOf(d.key)===-1)
                  filterKeys.push(d.key);
                else
                  filterKeys = filterKeys.filter(k => k != d.key);
                if(filterKeys.length === 0)
                  foodim.filter(null);
                else 
                  foodim.filterFunction(function(d) {
                    return filterKeys.indexOf(d) !== -1;
                  })

示例 fiddle：https://jsfiddle.net/gordonwoodhull/kfmfkLj0/9/

单击数据表以筛选其他图表 (dc.js)

click in datatable to filter other charts (dc.js)

dc.js

如果 table 维度是维度...

但是如果 table 维度是一个组呢？