Vega-Lite：是否可以绘制一个 Y 轴仅供 2 个特定层使用的 3 层图？

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 轴，另一个层将使用 resolve independent y 轴。

检查下面的代码或 editor link:

{
  "$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": {}
}

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

Answer 2

我想出了不是最优雅但绝对适合我的案例的解决方案。对于所有图层，我独立指定比例并隐藏轴。我觉得还有更多，实际上 Wahab Memon 的答案可能有效，如果所有层基本上都合并为两层。如果我重复更优雅的内容，我会 post 另一个答案。

{
    "$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},
            {"x4": 1, "y4": 2000},
            {"x4": 2, "y4": 4000}
        ]
    },
    "encoding": {"x": {"type": "quantitative"}, "y": {"type": "quantitative"}},
    "layer": [
        {
            "mark": "line",
            "encoding": {
                "x": {"field": "x"},
                "y": {"field": "y",
                      "type": "quantitative",
                      "axis": {"orient": "left",
                               "title": "y1, y2"
                              },
                      "scale": {"domainMin": 0,
                                "domainMax": 20}
                     },
                     "color": {"value": "blue"}
            }
        },
        {
            "mark": "line",
            "encoding": {
                "x": {"field": "x2"},
                "y": {
                    "field": "y2",
                    "type": "quantitative",
                    "axis": null,
                    "scale": {"domainMin": 0,
                              "domainMax": 20}
                },
                "color": {"value": "red"}
            }
        },

        {
            "mark": "line",
            "encoding": {
                "x": {"field": "x3"},
                "y": {"field": "y3",
                      "axis": {"orient": "right",
                               "title": "y3, y4"},
                      "type": "quantitative",
                      "scale": {"domainMin": 0,
                                "domainMax": 5000}
                     },
                "color": {"value": "black"}
            }
        },

        {
            "mark": "line",
            "encoding": {
                "x": {"field": "x4"},
                "y": {"field": "y4",
                      "axis": null,
                      "type": "quantitative",
                      "scale": {"domainMin": 0,
                                "domainMax": 5000}
                     },
                "color": {"value": "cyan"}
            }
        }

    ],
    "resolve": {"scale": {"y": "independent"}},
    "config": {}
}

Vega-Lite：是否可以绘制一个 Y 轴仅供 2 个特定层使用的 3 层图？

Vega-Lite: is it possible to plot a 3-layered graph with one Y-axis used only by 2 specific layers?

plot

graph

vega

vega-lite