select 两个条形图在相同的 x 位置，带有分层条形图

Question

我有以下可视化效果，如果您将其粘贴到 editor，它就是一个分层条形图。现在，当我 select 一根柱子时，我不想只 select 柱子本身，而是位于相同 x 位置的柱子。

我能想到的唯一解决方案是使用 vega 并显式引用底层数据集（因为 selection 信号是基于偏移量的，而不是基于数据的）。

您是否知道这在 vega-lite 中是如何完成的？

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "selection": {
    "select": {"type": "multi"}
  },
  "data": {
    "values": [
      {"STAT_CAUSE_DESCR": "Arson", "count": 804, "is_overview": true},
      {"STAT_CAUSE_DESCR": "Arson", "count": 604, "is_overview": false},
      {"STAT_CAUSE_DESCR": "Campfire", "count": 231, "is_overview": true},
      {"STAT_CAUSE_DESCR": "Children", "count": 97, "is_overview": true},
      {"STAT_CAUSE_DESCR": "Children", "count": 50, "is_overview": false},
      {
        "STAT_CAUSE_DESCR": "Debris Burning",
        "count": 1175,
        "is_overview": true
      },
      {
        "STAT_CAUSE_DESCR": "Debris Burning",
        "count": 115,
        "is_overview": false
      },
      {"STAT_CAUSE_DESCR": "Equipment Use", "count": 301, "is_overview": true},
      {"STAT_CAUSE_DESCR": "Equipment Use", "count": 51, "is_overview": false},
      {
        "STAT_CAUSE_DESCR": "Missing/Undefined",
        "count": 233,
        "is_overview": true
      }
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "STAT_CAUSE_DESCR", "type": "ordinal"},
    "y": {"field": "count", "type": "quantitative", "stack": null},
    "color": {
      "field": "is_overview",
      "type": "nominal",
      "scale": {"range": ["#003E6B", "#9FB3C8"], "domain": [false, true]},
      "legend": null
    },
    "opacity": {"value": 0.5},
    "stroke": {"value": "#F0B429"},
    "strokeWidth": {
      "condition": [
        {
          "test": {
            "and": [{"selection": "select"}, "length(data(\"select_store\"))"]
          },
          "value": 3
        }
      ],
      "value": 0
    }
  },
  "config": {}
}

Answer 1

您可以在选择定义中指定希望应用选择的编码。在您的情况下，选择规范如下所示：

  "selection": {
    "select": {"type": "multi", "encodings": ["x"]}
  },

查看结果here:

select 两个条形图在相同的 x 位置，带有分层条形图

select both bars in the same x position with layered barcharts

vega

vega-lite