DC.js-取消选择功能或过滤除单击的功能外的所有功能 [英] DC.js - deselect feature or filter all but the ones that are clicked

问题描述

我不确定这是否可行，并且对此进行研究并不幸运。我正在使用DC.js图表​​和crossfilter.js在仪表板上工作。我将以行图为例。除了点击要过滤的项目，还有可能相反吗？

I'm not sure if this is possible and no luck on researching this. I'm working on a dashboard using DC.js charts and crossfilter.js. I'm going to use a Row chart as an example. Instead of clicking on the items to filter, is it possible to do that opposite?

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

For example. When I click on an item from a row chart, instead of filtering on that selected item, it will deselect that item and filter the rest of the other items. And then I will keep clicking on other items to deselect.

我的主要目标是实现一项功能，使用户可以按住 CTRL键并左键单击行图中的项目以取消选择。这样，用户无需单击行图中的50多个项目即可进行过滤，而无需过滤的项目很少。

Pretty much my goal is to implement a feature where a user can hold the 'CTRL key' and 'left click' the items in the Row Chart to deselect. This way a user dont need to click more than 50+ items in the row chart to filter and have few items not to filter.

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

I do have a code where Javascript detect an event where "CTRL" and "Left click" triggers. but not sure of how to filter all except the ones that are clicked.

我希望这是有道理的。我试图查看DC.js或Crossfilter api，但找不到能做到这一点的函数，或者我错过了一些东西。

I hope this makes sense. I tried to look at the DC.js or Crossfilter api and I cannot find a function that can do that or am i missing something.

推荐答案

听起来，除了第一次单击，您想要的行为是相同的，您希望保留其他所有内容并删除其中的内容。如果按下 ctrl ，则单击该项目。

It sounds like you want the same behavior except for the very first click, where you want to keep everything else and remove the clicked item if ctrl is pressed.

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

If there is anything selected, then a click should toggle as usual, whether or not ctrl is pressed.

如Ethan所建议的那样，您可以将其实现为 filterHandler 。这也应该起作用，但是由于它的行为基本相同，因此建议使用 onClick 的替代。

As Ethan suggests, you could probably implement this as a filterHandler. That should work too, but since it's mostly the same behavior, I'd suggest using an override of onClick.

不幸的是，重写此方法的技术并不漂亮，但它可以起作用！

Unfortunately the technique for overriding this method is not pretty, but it works!

  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 是右键单击的同义词。

I used the alt key instead of ctrl because ctrl-click on Macs is a synonym for right-click.

这篇关于DC.js-取消选择功能或过滤除单击的功能外的所有功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！