Vega-lite 交互式图例和条形图

Question

我对 vega-lite 还很陌生。我真的很想让以下交互式条形图正常工作：

• 可以单击以突出显示一个或多个条形图的条形图图例
• 单击一个或多个条形以突出显示并反映它的传说
• 突出显示时，在栏上方显示文本值。

我构建它的策略是有两层，一层用于条，一层用于文本。然后一个选择在鼠标按下时处于“多”模式，并且也绑定到图例。

我的问题有两个：

1. 是否可以将选择绑定到图例，但也可以使用 mousedown？
2. 我很难理解选择在分层图形/图表中的工作原理。如果我在图层之外定义选择，我会收到一条警告，提示找不到选择，并且只有在我将其放在第一层的定义中时，选择才会按预期工作。此外，如果我没有图层，图例绑定似乎可以工作，但是当我有图层时会停止工作。这是图书馆的限制还是我做错了什么。

这是我的架构，提前感谢您的帮助！

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data.",
  "title": "test",
  "data": {
    "values": [
      ["Lateral", 630.666127],
      ["Basal", 413.211154],
      ["Accessory", 257.842981],
      ["Anterior", 48.735523],
      ["Central", 45.797799],
      ["Medial", 30.314856],
      ["Cortical", 27.697457],
      ["Corticoamygdaloid", 169.707268],
      ["Paralaminar", 46.216784],
      ["Whole_amygdala", 1670.189948]
    ],
    "name": "data"
  },
  "width": "600",
  "height": "400",
  "encoding": {
    "x": {"field": "0", "type": "nominal", "sort": "-y"},
    "y": {"field": "1", "type": "quantitative"}
  },
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "color": {
          "field": "0"
        },
        "opacity": {
          "condition": {"selection": "series", "value": 1},
          "value": 0.2
        }
      },
      "selection": {
        "series": {"type": "multi", "bind": "legend"}
      }
    },
    {
      "transform": [{"filter": {"selection":"series"}}],
      "mark": {"type": "text", "dy": -5},
      "encoding": {"text": {"field": "1"}}
    }
  ]
}

Answer 1

你已经很接近了。当您将选择绑定到图例时，默认情况下它会停用其他交互方式。但正如 Legend Binding 文档中简要提到的，您可以通过指定 "on" 属性重新启用此功能。这是结果（Open in editor）：

{
  "title": "test",
  "data": {
    "values": [
      ["Lateral", 630.666127],
      ["Basal", 413.211154],
      ["Accessory", 257.842981],
      ["Anterior", 48.735523],
      ["Central", 45.797799],
      ["Medial", 30.314856],
      ["Cortical", 27.697457],
      ["Corticoamygdaloid", 169.707268],
      ["Paralaminar", 46.216784],
      ["Whole_amygdala", 1670.189948]
    ],
    "name": "data"
  },
  "width": "600",
  "height": "400",
  "encoding": {
    "x": {"field": "0", "type": "nominal", "sort": "-y"},
    "y": {"field": "1", "type": "quantitative"}
  },
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "color": {"field": "0"},
        "opacity": {
          "condition": {"selection": "series", "value": 1},
          "value": 0.2
        }
      },
      "selection": {
        "series": {
          "type": "multi",
          "encodings": ["color"],
          "on": "click",
          "bind": "legend"
        }
      }
    },
    {
      "transform": [{"filter": {"selection": "series"}}],
      "mark": {"type": "text", "dy": -5},
      "encoding": {"text": {"field": "1"}}
    }
  ]
}

关于您的第二个问题：当前选择必须在它们绑定的层内定义，但这可能会在未来的 Vega-Lite 版本中发生变化；见https://github.com/vega/vega-lite/pull/6919。