如何在未选择过滤器时使条形图上的所有条形变为灰色 [dc.js]

Question

在dc.barchart的当前实现中，没有过滤器为每个条形着色。如果没有应用过滤器，我基本上希望"取消选择"类在每个柱上。现在我在向栏添加类时遇到问题。这样做的方法是什么？

我试过了

     this.chart.on('renderlet', (chart) => {
         chart.selectAll('rect.bar').classed('deselected', true);
         chart.redraw();
     });

但它什么也没做。

从UX的角度来看，默认实现并没有真正的意义，所以我不确定他们为什么这样做。

请注意，我使用的是 DC.JS

Answer 1

您尝试的代码是朝着正确方向迈出的一步，但是

1. 它立即重绘，取消自身(因为类是在渲染/重绘期间应用的(
2. 这会导致所有条形在所有情况下都是灰色的，而不仅仅是您关心的条
形

您正在尝试更改此函数的工作方式：

 _chart.fadeDeselectedArea = function (selection) {
    var bars = _chart.chartBodyG().selectAll('rect.bar');
    if (_chart.isOrdinal()) {
        if (_chart.hasFilter()) {
            bars.classed(dc.constants.SELECTED_CLASS, function (d) {
                return _chart.hasFilter(d.x);
            });
            bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
                return !_chart.hasFilter(d.x);
            });
        } else {
            bars.classed(dc.constants.SELECTED_CLASS, false);
            bars.classed(dc.constants.DESELECTED_CLASS, false);
        }
    } else {
        if (!_chart.brushIsEmpty(selection)) {
            var start = selection[0];
            var end = selection[1];
            bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
                return d.x < start || d.x >= end;
            });
        } else {
            bars.classed(dc.constants.DESELECTED_CLASS, false);
        }
    }
};

(来源链接(

具体来说，第一部分，用于序数柱线。

我仍然认为这种行为是一致的，但我很乐意帮助您自定义它！

我认为最好的方法是添加一个预转换钩子，它只是在没有过滤器时将取消选择的类添加到所有柱中。(您也可以覆盖该函数，但随后必须复制 has-filters 逻辑。

事实证明，这非常简单：

barChart.on('pretransition', function(chart) {
    var bars = chart.chartBodyG().selectAll('rect.bar');
    if (chart.hasFilter()) {
        bars.classed(dc.constants.DESELECTED_CLASS, true);
    }
});

(selected类不对条形图执行任何操作，因此我们可以忽略它。

这是一个小提琴。