带有填充编码的标签条形图不考虑排序

Question

我正在尝试制作带有标签和 fill 编码的排序条形图。但是当我添加填充编码时，它会破坏排序。通过 github 问题，似乎有办法解决这个问题，但我似乎可以找到解决方案。

在不使用填充编码的情况下，排序按预期工作。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "data": {
    "values": [
      {
        "a": "A",
        "b": 28,
        "color": "black"
      },
      {
        "a": "B",
        "b": 55,
        "color": "grey"
      },
      {
        "a": "C",
        "b": 43,
        "color": "red"
      }
    ]
  },
  "encoding": {
    "y": {
      "field": "a",
      "type": "ordinal",
      "sort": {
        "encoding": "x",
        "order": "descending"
      }
    },
    "x": {
      "field": "b",
      "type": "quantitative"
    }
  },
  "layer": [
    {
      "mark": "bar"
    },
    {
      "mark": {
        "type": "text",
        "align": "left",
        "baseline": "middle",
        "dx": 3
      },
      "encoding": {
        "text": {
          "field": "b",
          "type": "quantitative"
        }
      }
    }
  ]
}

当您将填充编码添加到顶级编码对象时，它会中断排序并显示以下警告

"fill": {
  "field": "color",
  "type": "ordinal",
  "scale": null
}

[Warning] Domains that should be unioned has conflicting sort properties. Sort will be set to true.

Full vega-editor here

是否有解决此问题的方法。

它似乎与这些问题有关（可能）#2536, #5408

Answer 1

是的，根本问题是 https://github.com/vega/vega-lite/issues/5048。在这种特殊情况下，将颜色添加到一次图层会将堆栈转换添加到数据流的一部分而不是另一部分，因此我们无法合并它。这是一个很好的测试用例。您能否将此示例添加到新的 github 问题中，以便我们尝试解决它？

您可以通过禁用堆叠 x 编码来手动修复此示例。

"stack": null

参见this spec。

带有填充编码的标签条形图不考虑排序

Labeled bar chart with fill encoding does not respect sorting

vega-lite