1

我目前有 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"}}
}

这是该图表当前的外观图片:

Vega-lite 图

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

任何帮助将非常感激!

4

1 回答 1

0

您为双 y 轴设置独立比例的方式是"resolve"在层图中使用。这是一个最小的示例,表明它可以在 hconcat 中工作(在编辑器中打开):

{
  "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"}}}]
于 2020-11-22T18:39:08.523 回答