DC.js

Question

我不确定这是否可行，也没有研究这个。我正在使用 DC.js 图表和 crossfilter.js 制作仪表板。我将以行图为例。不是点击要过滤的项目，是否可以相反？

例如。当我单击行图表中的某个项目时，它不会筛选所选项目，而是取消选择该项目并筛选其他项目的其余部分。然后我将继续单击其他项目以取消选择。

我的主要目标是实现一项功能，用户可以按住 'CTRL key' 和 'left click' 行图表中的项目以取消选择。这样，用户无需单击行图表中超过 50 个项目即可进行筛选，并且几乎没有项目不进行筛选。

我确实有一个代码，其中 Javascript 检测到 "CTRL" 和 "Left click" 触发的事件。但不确定如何过滤除被单击的以外的所有内容。

我希望这是有道理的。我试图查看 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 因为 ctrl-click Macs 是 right-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 - 取消选择功能或过滤除被单击的功能以外的所有功能

DC.js - deselect feature or filter all but the ones that are clicked

charts

crossfilter