单击数据表以过滤其他图表(dc.js)

时间:2017-07-06 19:18:43

标签: dc.js

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

我做了

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

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

请帮帮我吗?

1 个答案:

答案 0 :(得分:4)

如果表维度是维度......

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

因此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/