plot - Vega-Lite:是否可以绘制一个 3 层图，其中一个 Y 轴仅由 2 个特定层使用？

Question

我想知道如何以更受控的方式绘制具有多个 Y 轴的单个图表。我当前的图表已经有 3 层，它们的值大致相同，因此应该保留在一个 Y 轴上。然而，现在我必须在顶部绘制一个尺寸截然不同的东西，并且我需要一个独立的 Y 轴仅用于某些层。可能吗？

现在，如果我设置resolve:scale:Y:independent，所有图层都会尝试争夺第二个Y轴，整个情节就会消失。

下面是一个最小的可重现示例，可以按原样复制粘贴到 https://vega.github.io/editor/#/ 。这里的目标是能够用肉眼辨别所有 3 条线的斜率；换句话说，使“X-Y”和“X2-Y2”线使用具有一种刻度的左侧 Y 轴，并使“X3-Y3”使用具有不同刻度的右侧 Y 轴。

请注意，实际上，我已经有 6 个具有不同标记类型的图层，并将继续添加这些图层。然而，所有这些都将分为两个等级类别(例如，值从 1 到 10 和从 10000 到 20000)。我希望能够为每个层定义它属于哪个类别以及它使用哪个 Y 轴(左或右)。

{
  "data": {
    "values": [
      {"x": 1, "y": 10},
      {"x": 2, "y": 7},
      {"x2": 1, "y2": 11},
      {"x2": 2, "y2": 12},
      {"x3": 1, "y3": 1000},
      {"x3": 2, "y3": 2500}
    ]
  },
  "encoding": {"x": {"type": "quantitative"}, "y": {"type": "quantitative"}},
  "layer": [
    {
      "mark": "line",
      "encoding": {"x": {"field": "x"}, "y": {"field": "y"}}
      
    },
    {
      "mark": {
        "type": "square",
        "size": 100
       },
      "encoding": {
        "x": {"field": "x2"},
        "y": {"field": "y2"},
        "color": {"value": "red"}
      }
      
    },
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "x3"},
        "y": {"field": "y3"},
        "color": {"value": "black"}
      }
      
    }
  ],
  "mark": "line",
  "config": {},
  "resolve": {"scale": {"y": "independent"}}
}

Answer 1

在您的示例代码中，解析配置是在错误的位置给出的，因为您想要

"X-Y" and "X2-Y2" lines use the left Y-axis with one scale, and make "X3-Y3" use the right Y-axis with a different one.

我已将前两层放置在共享 x 和 y 轴的单独层中，以及使用解析具有独立 y 轴的不同层中。

检查以下代码或 editor链接:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"x": 1, "y": 10},
      {"x": 2, "y": 7},
      {"x2": 1, "y2": 11},
      {"x2": 2, "y2": 12},
      {"x3": 1, "y3": 1000},
      {"x3": 2, "y3": 2500}
    ]
  },
  "encoding": {"x": {"type": "quantitative"}, "y": {"type": "quantitative"}},
  "layer": [
    {
      "layer": [
        {
          "mark": "line",
          "encoding": {"x": {"field": "x"}, "y": {"field": "y"}}
        },
        {
          "mark": "line",
          "encoding": {
            "x": {"field": "x2"},
            "y": {
              "field": "y2",
              "type": "quantitative",
              "axis": {"orient": "left"}
            },
            "color": {"value": "red"}
          }
        }
      ]
    },
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "x3"},
        "y": {"field": "y3"},
        "color": {"value": "black"}
      }
    }
  ],
  "resolve": {"scale": {"y": "independent"}},
  "config": {}
}

请告诉我这是否是您的预期结果。