强制绘画顺序，在非堆积面积图中

Question

在使用 Vega Lite 时，我无法为绘制非堆叠区域强制执行相同的顺序。

例如，看看这里发生了什么：

在上面的行图中，我希望浅蓝色总是在深蓝色之后。然而，对于第 3、4 和 6 行，情况并非如此。

我已经尝试了几种顺序、排序和 zrank 的组合 — 但都没有成功。关于如何强制执行此操作的任何想法？

查看示例 full viz in the editor — 我无法让印度、以色列或日本在浅蓝色之上显示深蓝色区域。

Answer 1

我认为目前没有办法从图表规范中控制面积图的 z 顺序，但您可以通过数据源的顺序来控制它：颜色按照它们的顺序堆叠出现。例如这里第0行，颜色1在前，在第1行，颜色0在前：

{
  "data": {
    "values": [
      {"x": 0, "y": 2, "row": 0, "color": 1},
      {"x": 1, "y": 1, "row": 0, "color": 1},
      {"x": 0, "y": 1, "row": 0, "color": 0},
      {"x": 1, "y": 2, "row": 0, "color": 0},
      {"x": 0, "y": 2, "row": 1, "color": 0},
      {"x": 1, "y": 1, "row": 1, "color": 0},
      {"x": 0, "y": 1, "row": 1, "color": 1},
      {"x": 1, "y": 2, "row": 1, "color": 1}
    ]
  },
  "mark": "area",
  "encoding": {
    "x": {"field": "x", "type": "temporal"},
    "y": {"field": "y", "type": "quantitative", "stack": false},
    "color": {"field": "color", "type": "ordinal"},
    "row": {"field": "row", "type": "ordinal"}
  },
  "height": 50
}

如果您重新排列行，使颜色 0 在两种情况下都出现在颜色 1 之前，图表上的堆叠顺序将保持一致：

{
  "data": {
    "values": [
      {"x": 0, "y": 1, "row": 0, "color": 0},
      {"x": 1, "y": 2, "row": 0, "color": 0},
      {"x": 0, "y": 2, "row": 0, "color": 1},
      {"x": 1, "y": 1, "row": 0, "color": 1},
      {"x": 0, "y": 2, "row": 1, "color": 0},
      {"x": 1, "y": 1, "row": 1, "color": 0},
      {"x": 0, "y": 1, "row": 1, "color": 1},
      {"x": 1, "y": 2, "row": 1, "color": 1}
    ]
  },
  "mark": "area",
  "encoding": {
    "x": {"field": "x", "type": "temporal"},
    "y": {"field": "y", "type": "quantitative", "stack": false},
    "color": {"field": "color", "type": "ordinal"},
    "row": {"field": "row", "type": "ordinal"}
  },
  "height": 50
}

如果您按年份对输入数据的行进行重新排序（因此所有 2019 年的条目都在所有 2020 年的条目之前），则每个面板中的堆栈顺序应该相同。

强制绘画顺序，在非堆积面积图中

Force order of painting, in non-stacked area chart

vega-lite