处理交互式 Vega legends 中的事件 - 比赛条件

Question

链接图表仅包含图例，图例的工作原理如下：

点击水果名称即可打开和关闭它
按住 Shift 键并单击水果名称可将其打开并关闭所有其他水果名称

图例显示由两个实体控制：

数据集 SELECTED 会记住所选项目
信号 FILTERMODE 在
• include 和 exclude 之间切换过滤器类型

目前，如果只有一个水果名称处于打开状态，则单击它会将其切换为关闭（因此所有水果名称都会变为关闭）。 我想修改此行为，以便单击最后启用的水果名称将打开所有内容。 （换句话说 - 不可能取消所有选择。）

为了打开所有功能，我只需将信号 FILTERMODE 的值更改为

exclude。这就是我遇到困难的地方。 我在信号定义中尝试了以下方法：

"update": "event.shiftKey? 'include' : (length(data('selected'))? filtermode : 'exclude')", 这是行不通的。我相当确定这是由于竞争条件而发生的。 当我检查数据（'source'）的长度时，它仍然非空。

所以事件的顺序如下：

点击
更新信号FILTERMODE（检查所选数据集是否为空 - 不是）
更新选定的数据集（只是现在它已变为空）

最优雅的解决方法是什么？

Answer 1

试试这个。它与您的代码相同，但也会检查您的单行当前不执行的数组的长度。

现在可以先按住shift点击melon，然后再正常点击，滤镜模式就会切换。

编辑器

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A scatter plot example with interactive legend and x-axis.",
  "width": 200,
  "height": 200,
  "padding": 5,
  "autosize": "pad",
  "signals": [
    {
      "name": "shift",
      "value": false,
      "on": [
        {
          "events": "@legendSymbol:click, @legendLabel:click",
          "update": "event.shiftKey",
          "force": true
        }
      ]
    },
    {
      "name": "clicked",
      "value": null,
      "on": [
        {
          "events": "@legendSymbol:click, @legendLabel:click",
          "update": "{value: datum.value}",
          "force": true
        }
      ]
    },
    {
      "name": "filtermode",
      "value": "exclude",
      "on": [
        {
          "events": "@legendSymbol:click, @legendLabel:click",
          "update": "event.shiftKey? 'include' : (length(data('selected') == 0)? filtermode : 'exclude')",
          "force": true
        }
      ]
    }
  ],
  "data": [
    {
      "name": "source",
      "values": [
        {"fruit": "apple"},
        {"fruit": "plum"},
        {"fruit": "pear"},
        {"fruit": "melon"},
        {"fruit": "grape"},
        {"fruit": "strawberry"}
      ]
    },
    {
      "name": "selected",
      "on": [
        {"trigger": "clicked && (event.shiftKey)", "remove": true},
        {"trigger": "clicked && (event.shiftKey)", "insert": "clicked"},
        {"trigger": "clicked && (!event.shiftKey)", "toggle": "clicked"}
      ]
    }
  ],
  "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "range": {"scheme": "category10"},
      "domain": {"data": "source", "field": "fruit"}
    }
  ],
  "legends": [
    {
      "stroke": "color",
      "title": "Fruit",
      "encode": {
        "symbols": {
          "name": "legendSymbol",
          "interactive": true,
          "update": {
            "fill": {"value": "transparent"},
            "strokeWidth": {"value": 2},
            "opacity": [
              {
                "test": "filtermode == 'exclude' && !indata('selected', 'value', datum.value)",
                "value": 1
              },
              {
                "test": "filtermode == 'include' && indata('selected', 'value', datum.value)",
                "value": 1
              },
              {"value": 0.15}
            ],
            "size": {"value": 64}
          }
        },
        "labels": {
          "name": "legendLabel",
          "interactive": true,
          "update": {
            "opacity": [
              {
                "test": "filtermode == 'exclude' && !indata('selected', 'value', datum.value)",
                "value": 1
              },
              {
                "test": "filtermode == 'include' && indata('selected', 'value', datum.value)",
                "value": 1
              },
              {"value": 0.25}
            ]
          }
        }
      }
    }
  ]
}

Answer 2

您是否检查了正确数组的长度？很难准确理解所需的行为是什么，但如果我添加代码（取决于过滤模式是包含还是排除）

length(data('selected')) == 6 或

length(data('selected')) == 0 然后它似乎起作用了。

编辑器