vega-lite - 鼠标悬停时如何仅在特定轴上缩放？

Question

从这个具体示例开始，其中 2 个图在其水平轴上链接并在其垂直轴上自由，有没有办法在鼠标悬停时仅在特定轴上缩放？

实际设置的缩放对两个轴都是通用的。

标签： vega-lite

Answer 1

如果您希望在每个面板中滚动是独立的，您需要做两件事：

• setresolve.scale.x和resolve.scale.yto "independent"，所以刻度不会被链接。
• 在每个面板中为绑定选择使用不同的名称，因此选择器不会被链接。

例如（维加编辑器）：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/stocks.csv"},
  "vconcat": [
    {
      "transform": [{"filter": "datum.symbol==='IBM'"}],
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      },
      "selection": {"scroll_1": {"type": "interval", "bind": "scales"}}
    },
    {
      "transform": [{"filter": "datum.symbol==='GOOG'"}],
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      },
      "selection": {"scroll_2": {"type": "interval", "bind": "scales"}}
    }
  ],
  "resolve": {"scale": {"x": "independent", "y": "independent"}}
}