如何在 Vega 中并排显示具有不同 x 尺度的多个图表

Question

我有一组具有相同 y 尺度但不同 x 尺度的图表。我使用

hconcat

并排显示它们。为了节省空间并避免重复，我禁用了除第一个图表之外的所有图表的 y 轴。然而，这导致第一个图表的标题偏移：

这是 Vega 编辑器的链接。

如蓝色圆圈所示，“Chain”和“Mini Invaders”这两个标题并不一致。有办法解决这个问题吗？

我尝试使用

facet

来表达这些图表，但据我所知，构面不允许改变 x 尺度。但是，请告诉我这是否可以通过侧面实现。

Answer 1

您的规范中需要 labelBound: true 。

编辑器

{
  "config": {
    "view": {
      "continuousWidth": 400,
      "continuousHeight": 300,
      "stroke": "#000000",
      "strokeOpacity": 1,
      "strokeWidth": 2
    },
    "axis": {"labelFontSize": 24, "titleFontSize": 24,  "labelBound":true},
    "legend": {"labelFontSize": 24, "labelLimit": 0, "titleFontSize": 32},
    "title": {"baseline": "bottom", "fontSize": 24}
  },
  "hconcat": [
    {
      "layer": [
        {
          "mark": {"type": "area", "clip": true, "opacity": 0.2},
          "encoding": {
            "color": {
              "field": "Variations",
              "legend": {
                "orient": "top",
                "symbolOpacity": 1,
                "symbolSize": 200,
                "symbolStrokeWidth": 3,
                "symbolType": "stroke"
              },
              "scale": {
                "domain": ["Original Algorithm"],
                "range": [
                  "#e41a1c",
                  "#377eb8",
                  "#4daf4a",
                  "#984ea3",
                  "#a65628",
                  "#646464"
                ]
              },
              "type": "nominal"
            },
            "x": {"field": "step", "type": "quantitative"},
            "y": {
              "axis": {"labels": true, "tickCount": 5, "title": null},
              "field": "lower",
              "type": "quantitative"
            },
            "y2": {"field": "upper"}
          }
        },
        {
          "mark": {"type": "line", "clip": true},
          "encoding": {
            "color": {"field": "Variations", "type": "nominal"},
            "x": {"field": "step", "type": "quantitative"},
            "y": {
              "field": "regret",
              "scale": {"domain": [0, 1]},
              "type": "quantitative"
            }
          }
        }
      ],
      "height": 200,
      "title": "Chain",
      "transform": [{"filter": "(datum.domain === 'Chain')"}],
      "width": 200
    },
    {
      "layer": [
        {
          "mark": {"type": "area", "clip": true, "opacity": 0.2},
          "encoding": {
            "color": {
              "field": "Variations",
              "legend": {
                "orient": "top",
                "symbolOpacity": 1,
                "symbolSize": 200,
                "symbolStrokeWidth": 3,
                "symbolType": "stroke"
              },
              "scale": {
                "domain": ["Original Algorithm"],
                "range": [
                  "#e41a1c",
                  "#377eb8",
                  "#4daf4a",
                  "#984ea3",
                  "#a65628",
                  "#646464"
                ]
              },
              "type": "nominal"
            },
            "x": {"field": "step", "type": "quantitative"},
            "y": {
              "axis": {"labels": false, "tickCount": 5, "title": null},
              "field": "lower",
              "type": "quantitative"
            },
            "y2": {"field": "upper"}
          }
        },
        {
          "mark": {"type": "line", "clip": true},
          "encoding": {
            "color": {"field": "Variations", "type": "nominal"},
            "x": {"field": "step", "type": "quantitative"},
            "y": {
              "field": "regret",
              "scale": {"domain": [0, 1]},
              "type": "quantitative"
            }
          }
        }
      ],
      "height": 200,
      "title": "Mini Invaders",
      "transform": [{"filter": "(datum.domain === 'Mini Invaders')"}],
      "width": 200
    }