鼠标悬停放大图表咨询：row编码与vconcat实现可行性

问题说明 #

你当前的可视化是垂直排列的多区域图：

除中间的GOOG区域外，其余区域不放大难以看清。需要实现：鼠标悬停某一区域时，将该区域放大2倍，同时缩小其他区域以保持整体布局高度不变。如果row编码无法实现，是否可以通过vconcat方式达成？

解决办法 #

row分面编码的每个子图高度是固定的，无法通过交互动态调整单个子图高度，因此需要改用vconcat逐个定义子图，配合选择器和条件高度设置来实现需求：

• 创建悬停选择器，捕捉当前鼠标停留的股票代码（symbol）
• 给每个子图设置条件高度：若当前子图的symbol与悬停的symbol一致，高度设为原高度的2倍（80）；否则高度设为(原总高度 - 放大后高度)/(子图数量-1)，保证整体总高度不变

完整代码示例 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 300,
  "data": {"url": "data/stocks.csv"},
  "selection": {
    "hoverSymbol": {
      "type": "single",
      "fields": ["symbol"],
      "on": "mouseover",
      "clear": "mouseout",
      "empty": "none"
    }
  },
  "vconcat": [
    {
      "mark": "area",
      "encoding": {
        "x": {"field": "date", "type": "temporal", "axis": {"grid": false}},
        "y": {"field": "price", "type": "quantitative", "axis": {"grid": false}},
        "color": {"field": "symbol", "legend": null},
        "opacity": {
          "condition": {"selection": "hoverSymbol", "test": "datum.symbol === 'AAPL'", "value": 1},
          "value": 0.7
        }
      },
      "height": {
        "condition": {"selection": "hoverSymbol", "test": "datum.symbol === 'AAPL'", "value": 80},
        "value": (160 - 80)/3
      },
      "transform": [{"filter": "datum.symbol === 'AAPL'"}]
    },
    {
      "mark": "area",
      "encoding": {
        "x": {"field": "date", "type": "temporal", "axis": {"grid": false}},
        "y": {"field": "price", "type": "quantitative", "axis": {"grid": false}},
        "color": {"field": "symbol", "legend": null},
        "opacity": {
          "condition": {"selection": "hoverSymbol", "test": "datum.symbol === 'AMZN'", "value": 1},
          "value": 0.7
        }
      },
      "height": {
        "condition": {"selection": "hoverSymbol", "test": "datum.symbol === 'AMZN'", "value": 80},
        "value": (160 - 80)/3
      },
      "transform": [{"filter": "datum.symbol === 'AMZN'"}]
    },
    {
      "mark": "area",
      "encoding": {
        "x": {"field": "date", "type": "temporal", "axis": {"grid": false}},
        "y": {"field": "price", "type": "quantitative", "axis": {"grid": false}},
        "color": {"field": "symbol", "legend": null},
        "opacity": {
          "condition": {"selection": "hoverSymbol", "test": "datum.symbol === 'GOOG'", "value": 1},
          "value": 0.7
        }
      },
      "height": {
        "condition": {"selection": "hoverSymbol", "test": "datum.symbol === 'GOOG'", "value": 80},
        "value": (160 - 80)/3
      },
      "transform": [{"filter": "datum.symbol === 'GOOG'"}]
    },
    {
      "mark": "area",
      "encoding": {
        "x": {"field": "date", "type": "temporal", "axis": {"grid": false}},
        "y": {"field": "price", "type": "quantitative", "axis": {"grid": false}},
        "color": {"field": "symbol", "legend": null},
        "opacity": {
          "condition": {"selection": "hoverSymbol", "test": "datum.symbol === 'MSFT'", "value": 1},
          "value": 0.7
        }
      },
      "height": {
        "condition": {"selection": "hoverSymbol", "test": "datum.symbol === 'MSFT'", "value": 80},
        "value": (160 - 80)/3
      },
      "transform": [{"filter": "datum.symbol === 'MSFT'"}]
    }
  ]
}

关键细节说明 #

• 悬停选择器hoverSymbol：监听鼠标悬停事件记录当前选中的股票代码，鼠标移出时清空选择状态
• 动态高度设置：原总高度为4*40=160，悬停子图高度翻倍至80，剩余3个子图均分剩余80高度，确保整体布局高度不变
• 透明度强化：悬停子图透明度设为1，其余设为0.7，进一步突出当前聚焦的区域图

内容的提问来源于stack exchange，提问作者Vlad