Question

使用dc.barchart的当前实现，每个条都没有滤镜颜色。我基本上想要＆＃34;取消选择＆＃34;如果没有应用过滤器，则每个栏上都有一个类。现在我在向酒吧添加课程时遇到了麻烦。这样做的方法是什么？

我试过了

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

但它什么都没做。

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

请注意我使用DC.JS

Answer 1

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

它立即重绘，取消自身（因为在渲染/重绘期间应用了类）
在所有情况下都会导致所有的条纹都变灰，而不仅仅是你关心的那条

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

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

具体来说，第一部分，对于序数条。

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

我认为最好的方法是添加一个pretransition钩子，当没有过滤器时，它只是将取消选择的类添加到所有栏。（您也可以覆盖该功能，但是您必须复制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课程对条形图没有任何作用，所以我们可以忽略它。）

Here's a fiddle.

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

1 个答案: