在数据之间切换时重用 Vega-Lite 轴答案

【问题标题】：Re-use Vega-Lite axis when switching between data在数据之间切换时重用 Vega-Lite 轴
【发布时间】：2020-03-27 18:18:41
【问题描述】：

我正在尝试将一些 D3.js 图表移植到 Vega Lite，以便更快地迭代新设计。当前示例是一个带有按钮的条形字符，其下方可更改正在显示的数据。重要的是，数据的 y 标签会随着数据的变化而变化（x 不会），因为对图例的需求也会发生变化（某些数据集有多个系列，其他只有 1 个并且不需要图例)

我在 Vega Lite 中或多或少地复制了图表本身，但是我在确保图表的轴对齐时遇到了问题。即使在两个图中都没有图例的情况下，y 标签/y 值的变化也意味着固定大小会移动。

我上传了一个 GIF 来表达我的意思。

目前，按钮的功能是采用 Vega Lite 模板并根据一组新数据更新它（基本上只是更改数据集和标签、域等）。

有什么方法可以调整这些还是超出 Vega Lite 的范围？

编辑：

经过一番修改后，我发现这似乎是一个填充问题（参见新的 GIF）。我改变的是 y 轴的格式并将 y 轴从轴上推回，这似乎使情节“支撑”了其他一切。这表明原则上这种对齐（即使通过侥幸/蛮力）是可能的。但是，当我关闭我所在的响应页面的侧边栏时，问题再次出现。我还设置了 'align':'all' 和 'padding':10。更高的填充会更多地“支撑”它，但随后只会用大量空白填充该位置。

【问题讨论】：

标签： vega-lite

【解决方案1】：

问题似乎是 y 轴上标签的长度发生了变化。您可以将范围固定为至少足够大的数字。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
      {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
      {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative", "axis": {"minExtent": 100}}
  }
}

这是一个棘手的问题，因为您要求在彼此不了解的不同图表之间进行对齐。

【讨论】：

您好 dominik 非常感谢您的快速回复。我只是尝试过，但无济于事。它类似于我尝试过的格式化 yaxis 的其他方法。我已经编辑了原始问题以反映我的最新发现 re:padding。这可能是我可以通过 vega-embed 设置解决的问题吗？我会很感激你对此的想法。再次感谢！

【解决方案2】：

我很高兴地报告在 dominik 的帮助下实现的（至少目前是）有效的解决方案。具体来说，我需要关闭自动调整大小并传递自定义左/右填充值，这些值将绘图楔入正常和展开视图的位置，例如

"autosize":{"type":"none"},
"padding":{"top":30,"left":100,"right":100,"bottom":30},

【讨论】：