在数据表中单击以过滤其他图表(dc.js) [英] click in datatable to filter other charts (dc.js)

问题描述

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

I need to filter other charts when I click a row in the datatable.

我做到了

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

但其他图表中什么也没发生.

but nothing happens in the other charts.

可以帮我吗?

推荐答案

如果表维是维...

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

If the table dimension is a dimension...

The data that ordinarily populates a data table is the raw rows from the original data set, not key/value pairs.

因此 d.key 可能未定义.

我建议你先坚持

console.log(d)

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

into your click handler to see what your data looks like, to make sure d.key is valid.

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

Second, remember that a chart filters through its dimension. So you will need to pass a value to table.filter() that is a valid key for your dimension, and then it will filter out all rows for which the key is different. This may not be just the one row that you chose.

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

Typically a table dimension is chosen for the way it orders the values for the rows. You might actually want to filter some other dimension. But hopefully this is enough to get you started.

仅当您的表采用交叉过滤器维作为其维时，以上技术才有效.如果像在注释中链接的小提琴一样，您正在使用组作为维度，则该对象没有 .filter()方法，因此 table.filter()方法不会执行任何操作.

The above technique will only work if your table takes a crossfilter dimension as its dimension. If, as in the fiddle you linked in the comments, you're using a group as your dimension, that object has no .filter() method, so the table.filter() method won't do anything.

如果您只需要过滤单击的一项，则只需

If you only need to filter the one item that was clicked, you could just do

foodim.filter(d.key)

这有效果，但没那么有用.

This has an effect but it's not that useful.

如果需要DC的有序图中使用的切换功能，则需要对其进行仿真.并不是那么复杂:

If you need the toggle functionality used in dc's ordinal charts, you'll need to simulate it. It's not all that complicated:

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

这篇关于在数据表中单击以过滤其他图表(dc.js)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！