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

Question

我对 vega-lite 还很陌生。我真的很想让下面的交互式条形图起作用：

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

我构建它的策略是有两层，一层用于条形图，一层用于文本。然后在 mousedown 上处于 'multi' 模式的一个选择，也绑定到图例。

我的问题有两个：

是否可以将选区绑定到图例，同时还可以使用 mousedown？
我很难理解分层 graphs/charts 中的选择是如何工作的。如果我在层外定义选区，我会收到一条警告，说找不到选区，并且选区只有在我将它放在第一层的定义中时才会按预期工作。此外，如果我没有图层，图例绑定似乎可以工作，但当我有图层时，它就会停止工作。这是库的限制还是我做错了什么。

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

{
  "$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 docs, you can re-enable this by specifying the "on" attribute. Here is the result (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。

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

Vega-lite interactive legend and bar chart

vega-lite