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"属性来重新启用它。 这是结果（ 在编辑器中打开）：

{
  "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 。