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



当我单击数据表中的行时,我需要过滤其他图表。

我做了

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

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

你能帮帮我吗?

如果表维度是一个维度...

通常填充数据表的数据是原始数据集中的原始行,而不是键/值对。

因此,d.key很可能是未定义的。

我建议你先坚持

console.log(d)

添加到您的点击处理程序中,以查看您的数据的外观,以确保d.key有效。

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

通常,选择表维度的方式是针对其对行的值进行排序的方式。您可能实际上想要筛选其他维度。但希望这足以让你开始。

但是,如果表维度是一个组呢?

仅当表采用交叉筛选器维度作为其维度时,上述技术才有效。如果,就像您在注释中链接的小提琴一样,您使用组作为维度,则该对象没有.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;
})

小提琴示例:https://jsfiddle.net/gordonwoodhull/kfmfkLj0/9/

最新更新