vega-lite 在有遮挡时勾选 z-index？

Question

在可视化中，我想在有遮挡时对标记进行排序（基于标记的属性）。我尝试使用不透明度，但我更希望能够直接控制哪个元素位于顶部。我查看了文档并看到了一些讨论 https://github.com/vega/vega-lite/issues/1684，但找不到是否有直接执行此操作的方法。或者我是否可以创造性地使用图层来达到相同的效果？

Open the Chart in the Vega Editor 你可以看到我的刻度是重叠的，我想让灰色的 ("scroll") 的 z-index 比其他所有标记都低。现在我正在使用不透明度，但它仍然是我想避免的遮挡。

非常感谢！

Answer 1

您可以使用 order 编码设置 z-index，但它只接受 sort = "ascending" 或 "descending"，这对您没有直接帮助。

您可以通过使用计算转换来定义您想要的特定 z 顺序来绕过此限制：

"transform": [
  {"calculate": "datum.actionChart == 'scroll' ? 0 : 1", "as": "zorder"}
]

然后在顺序编码中引用该新字段：

"encoding": {
  ...
  "order": {"field": "zorder", "type": "quantitative"}
}

结果如下所示 (Open the Chart in the Vega Editor):

vega-lite 在有遮挡时勾选 z-index？

vega-lite tick z-index when there is occlusion?

vega-lite