如何突出显示放大的栏并了解 vega-lite 中该栏的详细信息？

Question

当我 select 底部图表中的范围时，我能够创建概览详细信息条形图并很好地放大。但我很难突出显示放大图中的条形图，也很难知道哪些条形图已 selected。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "actions": false,
  "data": {
    "values": [
      { "created": 1595053277243 },
      { "created": 1595053277244 },
      { "created": 1595055277243 },
      { "created": 1594880606860 },
      { "created": 1594880604261 }
    ]
  },
  "vconcat": [{
        "width": 1500,
        "height": 300,
        "selection": {
          "highlight": {"type": "single", "empty": "none", "on": "mouseover"},
          "select": {"type": "multi"}
        },
        "mark": {
          "type": "bar",
          "fill": "#4C78A8",
          "stroke": "black",
          "cursor": "pointer"
        },
        "encoding": {
          "x": {
            "field": "created",
            "type": "temporal",
            "scale": {"domain": {"selection": "brush"}},
            "axis": {"title": ""},
            "timeUnit": "utcyearmonthdatehoursminutes",
            "update": {
              "fillOpacity": {
                "condition": {"selection": "select", "value": 1},
                "value": 0.3
              },
              "strokeWidth": {
                "condition": [
                  {
                    "test": {
                      "and": [
                        {"selection": "select"},
                        "length(data(\"select_store\"))"
                      ]
                    },
                    "value": 2
                  },
                  {"selection": "highlight", "value": 1}
                ],
                "value": 0
              }
            }
          },
          "y": {
            "field": "created",
            "type": "quantitative",
            "aggregate": "count"
          }
        },
        "config": {
          "scale": {
            "bandPaddingInner": 0.2
          }
        }
      }, {
        "width": 1500,
        "height": 100,
        "padding": 10,
        "mark": "bar",
        "selection": {
          "brush": {"type": "interval", "encodings": ["x"]}
        },
        "encoding": {
          "x": {
            "field": "created",
            "type": "temporal",
            "timeUnit": "utcyearmonthdatehours"
          },
          "y": {
            "field": "created",
            "type": "quantitative",
            "aggregate": "count"
          }
        }
      }]
}

我尝试在编码中加入填充不透明度和描边宽度，但似乎不起作用。我还尝试在 vega-embed 中修补已编译的 vega 以收听栏点击事件，但它不收听顶部（放大）图表。

Example of what I am trying to do

Answer 1

Vega-Lite 编码没有 update 属性。您可以直接在编码映射中指定特征：


      "encoding": {
        "x": {
          "field": "created",
          "type": "temporal",
          "scale": {"domain": {"selection": "brush"}},
          "axis": {"title": ""},
          "timeUnit": "utcyearmonthdatehoursminutes"
        },
        "fillOpacity": {
          "condition": {"selection": "select", "value": 1},
          "value": 0.3
        },
        "strokeWidth": {
          "condition": [
            {
              "test": {
                "and": [
                  {"selection": "select"},
                  "length(data(\"select_store\"))"
                ]
              },
              "value": 2
            },
            {"selection": "highlight", "value": 1}
          ],
          "value": 0
        },
        "y": {"field": "created", "type": "quantitative", "aggregate": "count"}
      }

Open the Chart in the Vega Editor

如何突出显示放大的栏并了解 vega-lite 中该栏的详细信息？

How to highlight the zoomed in bar and know the details of that bar in vega-lite?

vega-lite

vega