Question

我想从PIE图表中删除选定的切片而不是灰色。例如DC page＆＃34;天数增加/损失＆＃34;或＆＃34;宿舍＆＃34; PIE图表如果我点击切片（比如Q4）我想从显示中删除该条目（包括切片+图例，如果我想恢复，我可以使用控件重置它）。

如何实现这种行为？

我在点击处理程序中尝试了以下内容：

let filter = chart.keyAccessor()(d);
            if (d3.event['shiftKey']) {
                if ('Others' === filter) {
                    chart['_invokeFilteredListener'](Array.isArray(filter)? filter : [filter], 'error');
                } else {
                    chart['__inclusive'] = true;
                    chart['replaceFilter'](filter);
                    //if (multivalued) {
                    dc.redrawAll(); //why renderAll()?
                    //}
                }
            } else {
                dc.events.trigger(() => {
                    chart.filter(filter);
                    dc.redrawAll();
                });
            }

filterHandler：

.filterHandler((dim: Crossfilter2.Dimension<any, any>, filters: string[]) => {
                dim.filter(null);
                const data = this._chart.data();
                const filterObject = {};
                for (let f of filters) {
                    if ('Others' === f) {
                        let others: any[] = data[data.length - 1].others;
                        if (Array.isArray(others)) {
                            for (let o of others) {
                                filterObject[o] = true;
                            }
                        } else {
                            dim.group().all().forEach(g => {
                                let p = filters.indexOf(g.key);
                                if (p < 0) {
                                    filterObject[g.key] = p;
                                }
                            });
                        }
                    } else {
                        filterObject[f] = true;
                    }
                }
                dim.filterFunction(d => {
                    return filterObject[Array.isArray(d)? d[0] : d] !== void 0;
                });
                return filters;
            });

Answer 1

可能有很多方法可以做到这一点，但我认为的第一件事是“听起来像一个fake group”，它的行为就像一个普通的群体，但它确实观察了自己维度的过滤器：

function filter_self_group(chart, group) {
    return {
        all: function() {
            var filters = chart.filters();
            return group.all().filter(kv => !filters.includes(kv.key));
        }
    };
}
yearRingChart
    .group(filter_self_group(yearRingChart, spendPerYear))

只需从图表中抓取过滤器，并确保排除这些过滤器。这不涉及其他人，但这很简单，可以添加。

接下来，我们要过滤 out 值，而不是像那样过滤，就像dc.js一样。我们可以通过修改默认的过滤器处理程序来实现。我认为这与你上面所做的类似，但更简单：

function negate_filters(dimension, filters) { if (filters.length === 0) dimension.filter(null); else dimension.filterFunction(function(d) { return !filters.includes(d); }) return filters; }

另外，我认为当你过滤掉最后一个切片时会重置过滤器会很好：

function all_is_nothing(N, filterHandler) { return function(dimension, filters) { console.log(filters.length, N) if(filters.length === N) filters = []; return filterHandler(dimension, filters); } }

将这些联系在一起：

yearRingChart .filterHandler(all_is_nothing(spendPerYear.all().length, negate_filters));

最后，“取消选择的灰色”对我们没用，我无法弄清楚如何禁用CSS规则的效果，所以让我们在图表绘制后从切片中删除该类，但之前它显示：

yearRingChart.on('pretransition', function(chart) { chart.selectAll('g.deselected').classed('deselected', false); });

我确信还有很多其他方法可以做到这一点，也许还有更简洁的方法。这就是我想到的。我很乐意为其他人添加支持，但我想首先提出基本想法。

Here is an example fiddle.

dc.js在PIE图表中删除单击的切片而不是灰色的？

1 个答案: