vega-lite 中的动态文本标记为标题

Question

我在 vega-lite (kibana) 中有一个连接视图，其中第一个条形图用作其他图的选择。因此，如果我单击条形图的一个条形图，所有其他可视化效果都会发生变化 accordingly.I 也有一个具有相同目标的下拉菜单。

我想要一个动态标题（或文本标记）来显示我刚刚单击的栏的 y 标签（或下拉列表中的名称）。到目前为止我设法做到了，但是如果没有为栏选择，所有标签将出现在同一个标题中，这不是很好。

我认为用某个值初始化参数可能会解决问题，但如果我在条形之间单击，所有值都会出现，我的标题也有同样的问题。此外，我希望所有条形图始终可见，只需更改被单击的条形图的不透明度即可。

你可以在下面找到我的意思的简化版本，

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Two horizonally concatenated charts that show a histogram of precipitation in Seattle and the relationship between min and max temperature.",
  "data": {"url": "data/weather.csv"},
  "hconcat": [
    {
      "mark": "bar",
      "encoding": {
        "y": {"field": "location", "type": "nominal"},
        "x": {"aggregate": "mean", "field": "precipitation"},
        "opacity":{"condition":{"param":"click","value":0.2},"value":0.7}
      },
      "params":[{
        "name":"click",
        "select":{"type":"point","encodings":["y"], "on":"click"},
        "bind":{"input":"select","options":["New York", "Seattle"]},
        "value":{"y":"Seattle"}
      },
      {
        "name":"highlight",
        "select":{"type":"point"}
      }
      ],
      "transform":[{"filter":{"param":"click"}}]
    },
    {"layer":[{
      "transform":[{"filter":{"param":"click"}}],
      "mark":"bar",
      "mark":{"type":"text","dy":-50, "dx":30, "fontSize":20},
      "encoding":{"text":{"field":"location","type":"nominal"}}
      
    }]},
    {
      "mark": "point",
      "encoding": {
        "x": {"field": "temp_min", "bin": true},
        "y": {"field": "temp_max", "bin": true},
        "size": {"aggregate": "count"}
      },
      "transform":[{"filter":{"param":"click"}}]
    }
  ]
}

vega editor

像往常一样，我们非常欢迎任何帮助！

Answer 1

以下是所需的更改：

要同时显示两个条形，请从条形图中删除过滤器转换。
在 click params 中添加了一些更改，例如如果有人单击空白 space，则 nearest 栏将被选中并更改 opacity 的值。

参考editor或以下代码：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Two horizonally concatenated charts that show a histogram of precipitation in Seattle and the relationship between min and max temperature.",
  "data": {"url": "data/weather.csv"},
  "hconcat": [
    {
      "mark": "bar",
      "encoding": {
        "y": {"field": "location", "type": "nominal"},
        "x": {"aggregate": "mean", "field": "precipitation"},
        "opacity": {
          "condition": {"param": "click", "value": 0.7, "empty": false},
          "value": 0.2
        }
      },
      "params": [
        {
          "name": "click",
          "select": {
            "type": "point",
            "encodings": ["y"],
            "on": "click",
            "clear": false,
            "nearest": true
          },
          "bind": {"input": "select", "options": ["New York", "Seattle"]},
          "value": "Seattle"
        },
        {"name": "highlight", "select": {"type": "point"}}
      ]
    },
    {
      "mark": "point",
      "title": {"text": {"expr": "click_location"}},
      "encoding": {
        "x": {"field": "temp_min", "bin": true},
        "y": {"field": "temp_max", "bin": true},
        "size": {"aggregate": "count"}
      },
      "transform": [{"filter": {"param": "click"}}]
    }
  ]
}

vega-lite 中的动态文本标记为标题

Dynamic text mark as title in vega-lite

vega-lite

kibana-7