在数据之间切换时重新使用Vega-Lite轴

Question

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

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

我上传了一个GIF，以显示我的意思。

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

有什么方法可以对齐这些，还是Vega Lite超出范围？

编辑：

稍作修改后，我发现这似乎是一个填充问题（请参阅新的GIF）。我更改的是y轴的格式设置，并将y轴从轴上推回，这似乎使绘图与其他所有内容“相对”。这表明原则上这种对准（即使是通过by弹/蛮力）也是可行的。但是，当我关闭响应页面的侧边栏时，问题再次出现。我还设置了'align'：'all'和'padding'：10。较高的填充会“支撑”更多，但随后会在空白处充满空白。

Answer 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}}
  }
}

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

Answer 2

我很高兴地报告在dominik的帮助下实现的（至少目前）可行的解决方案。具体来说，我需要关闭自动调整大小，并通过自定义的左/右填充值，该值将普通视图和展开视图的绘图都楔入到位，例如

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