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

问题

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

I did

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.

Can you help me, please?

回答1:

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.

So it is likely that d.key is undefined.

I'd advise you first to stick

console.log(d)

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

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.

But what if the the table dimension is a group?

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.

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;
                  })

Example fiddle: https://jsfiddle.net/gordonwoodhull/kfmfkLj0/9/

来源：https://stackoverflow.com/questions/44957203/click-in-datatable-to-filter-other-charts-dc-js

标签

dc.js