时间戳

首页 > 解决方案 > 在数据之间切换时重用 Vega-Lite 轴

vega-lite - 在数据之间切换时重用 Vega-Lite 轴

问题描述

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

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

我上传了一个 GIF 来表达我的意思。 在此处输入图像描述

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

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

编辑：

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

在此处输入图像描述

标签： vega-lite

解决方案

问题似乎是 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}}
  }
}

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

推荐阅读