Vega-lite：无法解析 hconcat 图上的双 y 轴

Question

我目前有 2 个水平连接的图表，我可以在第一个图表上选择变量，并在第二个图表上获得有关它们的更多信息。我正在尝试解析第二张图上的 y 轴，以便我有 2 个具有不同单位的 y 轴，并且已经弄清楚如何将左侧和右侧的轴分开，但单位是相同的。这不是很有用，我想知道如何在两者上都有独立的音阶。从文档来看，似乎使用 resolve 函数应该可以解决问题，但它所做的只是将轴分开。

这是我的代码：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "url": "data/Per_Species_Per_Location/Fisher_location137.csv"
  },
  "spacing": 15,
  "hconcat": [{"layer":
    [{   "encoding": {
        "color": {
            "title": "Total (PPA)",
            "field": "Total",
            "type": "quantitative",
            "scale": {"range": ["#FFCC66", "#09bc8a", "#023057"]}
        },
        "x": {
          "field": "Variable",
          "type": "nominal",
          "axis": {"labelAngle": -45, "title": "Element",
        "grid": false}
        },
        "y": {
          "title": "Total (PPA)",
          "field": "Total",
          "type": "quantitative"
        },
        "fillOpacity": {
      "condition": {"selection": "select", "value": 1},
      "value": 0.25
    },
          "tooltip": [
      {"field": "Variable", "type": "nominal"},
      {"field": "Total", "type": "quantitative"},
    ]
      },
      "width": 750,
      "height": 400,
      "selection": {"select": {"encodings": ["x"], "type": "multi"}},
      "mark": {"type": "bar", "cursor": "pointer"},
    }]},
    {"layer":[
      {"width": 150,
      "height": 400,
      "mark": "bar",
      "encoding": {
        "color": {
          "condition": {
            "selection": "click",
            "field": "Sex",
            "type": "nominal",
            "scale": {"range": ["#7a003c", "#FFCC66", "#5b6770"]}
          },
          "value": "lightgray"
        },
        "y": {"field": "Sex Value", "type": "quantitative", "aggregate": "mean", "axis": {"orient": "left"}},
        "x": {"title": "Sex", "field": "Sex", "type": "nominal"},
          "tooltip": [
      {"field": "Sex", "type": "nominal"},
      {"field": "Sex Value", "type": "quantitative", "aggregate": "mean"},
      {"field": "Count", "type": "quantitative", "aggregate": "sum"}
    ]
      },
      "selection": {"click": {"encodings": ["color"], "type": "multi"}},
      "transform": [{"filter": {"selection": "select"}}]},
      {"mark": "rule",
      "encoding":{
        "y": {
        "aggregate": "mean",
        "field": "Reference",
        "type": "quantitative",
        "axis": {"orient": "right"}
      },
      "color": {"value": "black"},
      "size": {"value": 3}
      },
      "transform": [{"filter": {"selection": "select"}}]}
    ]}], "resolve": {"scale": {"y": "independent"}}
}

这是图表当前的样子：

如您所见，性别值的平均值和参考值的平均值具有相同的轴刻度，我希望它们不同，以便可以轻松看到条形。

任何帮助将不胜感激！

Answer 1

为双 y 轴设置独立比例的方式是在层图中使用"resolve"。这是一个最小的示例，表明它可以在 hconcat (open in editor) 中工作：

{
  "data": {
    "values": [
      {"Sex": "Female", "Sex Value": 3, "Reference": 42},
      {"Sex": "Male", "Sex Value": 2, "Reference": 40},
      {"Sex": "Unknown", "Sex Value": 1, "Reference": 45}
    ]
  },
  "hconcat": [
    {
      "mark": "point",
      "encoding": {
        "x": {"field": "Sex Value", "type": "quantitative"},
        "y": {"field": "Reference", "type": "quantitative"}
      }
    },
    {
      "layer": [
        {
          "mark": "bar",
          "encoding": {
            "x": {"type": "nominal", "field": "Sex"},
            "y": {
              "type": "quantitative",
              "aggregate": "mean",
              "field": "Sex Value"
            }
          }
        },
        {
          "mark": "rule",
          "encoding": {
            "y": {
              "type": "quantitative",
              "aggregate": "mean",
              "field": "Reference"
            }
          }
        }
      ],
      "resolve": {"scale": {"y": "independent"}}
    }
  ]
}

我认为它在您的情况下不起作用的原因是您将解决方案放在 hconcat 中，而不是将解决方案放在 layer 中。换句话说，而不是规范的最后一行是：

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

你应该使用：

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