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

【问题标题】：Vega-Lite: is it possible to plot a 3-layered graph with one Y-axis used only by 2 specific layers?Vega-Lite：是否可以绘制一个 3 层图，其中一个 Y 轴仅由 2 个特定层使用？
【发布时间】：2022-01-08 13:15:54
【问题描述】：

我想知道如何以更可控的方式绘制具有多个 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"}}
}

【问题讨论】：

标签： plot graph vega-lite vega

【解决方案1】：

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

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

我已将前两层放置在一个单独的层中，共享 x 和 y 轴，另一个层使用解析将具有 independent 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": {}
}

让我知道这是否是您的预期结果。

【讨论】：

非常感谢您的回答。不幸的是，这不起作用，尽管它适用于我提供的示例。原因是在我的实际情况下，我必须为不同的图层使用不同的标记，所以不能真正组合它们。我会明确说明并修改示例，这是我的错。
修改了示例，并添加了另一个说明性段落。
我想了一会儿这个问题，我想我只需要手动指定每一层的轴——至少是定位（左或右）和可见性；然后指定每层的比例域，以确保绘图实际上使用图形上相同的 Y 坐标。

【解决方案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": {}
}

【讨论】：