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

Question

在 dc.barchart 的当前实施中，每个栏都没有颜色过滤器。如果没有应用过滤器，我基本上希望 "deselected" class 出现在每个柱上。现在我在向栏中添加 class 时遇到问题。这样做的方法是什么？

我试过了

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

但它什么也没做。

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

请注意我正在使用 DC.JS

Answer 1

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

它立即重绘，取消自身（因为 class 在 render/redraw 期间应用）
这会导致所有条形图在所有情况下都变成灰色，而不仅仅是您关心的条形图

您正在尝试更改此功能的工作方式：

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

(source link)

特别是第一部分，用于有序柱。

我继续认为这种行为是一致的，但我很乐意帮助您定制它！

我认为最好的方法是添加一个预转换挂钩，它只在没有过滤器时将取消选择的 class 添加到所有条形图。（您也可以重写该函数，但您必须复制 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 class 对条形图没有任何作用，所以我们可以忽略它。）

Here's a fiddle.

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

how to make all bars on barchart grey on no filters selected [dc.js]

dc.js