Question

我不确定这是否可行而且没有运气研究这个。我正在使用DC.js图表和crossfilter.js在仪表板上工作。我将以Row图表为例。而不是点击要过滤的项目，是否可以做相反的事情？

例如。当我单击行图表中的某个项目时，它将取消选择该项目并过滤其他项目，而不是对该选定项目进行过滤。然后我将继续点击其他项目取消选择。

我的目标是实现一个功能，用户可以按住“CTRL键”和“左键单击”行图表中的项目取消选择。这样，用户无需在行图中单击超过50个项目进行过滤，并且几个项目不会过滤。

我确实有一个代码，其中Javascript检测到“CTRL”和“左键单击”触发的事件。但不确定如何过滤所有被点击的内容。

我希望这是有道理的。我试着看看DC.js或Crossfilter api，我找不到能做到这一点的功能，或者我错过了什么。

Answer 1

听起来你想要相同的行为，除了第一次点击，你要保留其他所有内容并删除点击的项目，如果按下 ctrl 。

如果选择了任何内容，则无论是否按下 ctrl ，都应该像往常一样切换。

正如Ethan建议的那样，您可以将其实现为filterHandler。这也应该有效，但由于它主要是相同的行为，我建议使用覆盖onClick。

不幸的是，重写此方法的技术并不漂亮，但它确实有用！

  var oldClick = rowChart.onClick;
  rowChart.onClick = function(d) {
      var chart = this;
      if(!d3.event.altKey)
          return oldClick.call(chart, d); // normal behavior if no mod key
      var current = chart.filters();
      if(current.length)
          return oldClick.call(chart, d); // normal behavior if there is already a selection
      current = chart.group().all()
          .map(kv => kv.key)
          .filter(k => k != d.key);
      chart.replaceFilter([current]).redrawGroup();
  };

我使用 alt 键而不是 ctrl ，因为Mac上的 ctrl-click 是右键单击的同义词。

Answer 2

我在需要此功能的行图上使用此功能它比其他答案短一点，也许它对某人有用（我不知道哪个更好）。

    // select only one category at a time
    mychart.onClick = function(_chart){ return function (d) {
        var filter = _chart.keyAccessor()(d);
        dc.events.trigger(function () {
            _chart.filter(null);
            _chart.filter(filter);
            _chart.redrawGroup();
        });
    }; }(mychart)

mychart是dc.rowchart

的名称

    var mychart = dc.rowChart('#mychart');

[编辑]

这个也适用，更短，适用于条形图

    mychart.addFilterHandler(function (filters, filter) {
        filters.length = 0; // empty the array
        filters.push(filter);
        return filters;
    });

DC.js - 取消选择要素或过滤掉所有被点击的内容

2 个答案: