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

Question

我想知道如何以更可控的方式 plot 具有多个 Y 轴的单个图形。 我当前的图表已经有 3 层，它们的值相同，所以应该保持在一个 Y 轴上。 但是，现在我必须在 plot 上放置一个完全不同比例的东西，并且我需要一个独立的 Y 轴，仅用于某些层。 可能吗？

现在，如果我设置resolve: scale: Y: independent ，所有层都试图争取第二个 Y 轴，看起来，整个 plot 就会消失。

下面是一个最小的可复制示例，可以按原样复制粘贴到https://vega.github.io/editor/#/ 。 这里的目标是能够用肉眼分辨所有 3 条线的斜率； 换句话说，让“XY”和“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

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

“XY”和“X2-Y2”线使用左Y轴一个刻度，而“X3-Y3”使用右Y轴一个不同的刻度。

我已将第一两层放置在一个单独的层中，该层共享 x 和 y 轴，另一个层将使用解析具有independent的 y 轴。

检查以下代码或编辑器链接：

{
  "$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 的答案可能会奏效，如果所有层基本上都合并为两个。 如果我重新迭代更优雅的东西，我会发布另一个答案。

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