使用字段的 vega lite 彩色文本

Question

我有一个带有文本标记的堆积条形图，我想根据字段“text_value”对其进行着色。

这就是我现在所拥有的，但是根据文本标记编码中的颜色条件，顶部文本值应为黑色。

{
"data": {
    "values": [
      {"category": "a", "xval": 1, "yval": "top", "text_val": 1},
      {"category": "b", "xval": 5, "yval": "top", "text_val": 1},
      {"category": "c", "xval": 8, "yval": "top", "text_val": 1},
      {"category": "a", "xval": 3, "yval": "bottom", "text_val": 2},
      {"category": "b", "xval": 1, "yval": "bottom", "text_val": 2},
      {"category": "c", "xval": 9, "yval": "bottom", "text_val": 2}
    ]
  },
  "encoding": {
    "y": {
      "title": null,
      "field": "yval",
      "sort": "descending"
    }
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "tooltip": true
      },
      "encoding": {
        "x": {
          "title": null,
          "field": "xval",
          "type": "quantitative",
          "aggregate": "sum"
        },
        "color": {"field": "category"},
        "order": {"field": "category"}
      }
    },
    {
      "mark": {
        "type": "text",
        "tooltip": true,
        "fontSize": 100
      },
      "encoding": {
        "x": {
          "title": null,
          "field": "xval",
          "type": "quantitative",
          "aggregate": "sum",
          "stack": "zero",
          "bandPosition": 0.5
        },
        "text": {
          "title": null,
          "field": "xval",
          "type": "quantitative",
          "aggregate": "sum"
        },
        "color": {
          "condition": {
            "test": "datum.text_val == 1",
            "value": "black"
          },
          "value": "white"
        },
        "order": {"field": "category"}
      }
    }
  ]
}

请注意：似乎“text_value”字段需要在其他地方使用，但除了条件之外，我不需要它。 此外，聚合必须是总和，因为这是一个简化的示例。

Answer 1

您隐藏的聚合变换在这里：

导致了这样的结果：

即您所引用的列已丢失。

您可以创建一个适当的转换来执行您自己的聚合，或者只使用像 yval 这样可用的值

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "height": 200,
  "data": {
    "values": [
      {"category": "a", "xval": 1, "yval": "top", "text_val": 1},
      {"category": "b", "xval": 5, "yval": "top", "text_val": 1},
      {"category": "c", "xval": 8, "yval": "top", "text_val": 1},
      {"category": "a", "xval": 3, "yval": "bottom", "text_val": 2},
      {"category": "b", "xval": 1, "yval": "bottom", "text_val": 2},
      {"category": "c", "xval": 9, "yval": "bottom", "text_val": 2}
    ]
  },
  "encoding": {"y": {"title": null, "field": "yval", "sort": "descending"}},
  "layer": [
    {
      "mark": {"type": "bar", "tooltip": true},
      "encoding": {
        "x": {
          "title": null,
          "field": "xval",
          "type": "quantitative",
          "aggregate": "sum"
        },
        "color": {"field": "category"},
        "order": {"field": "category"}
      }
    },
    {
      "mark": {"type": "text", "tooltip": true, "fontSize": 100},
      "encoding": {
        "x": {
          "title": null,
          "field": "xval",
          "type": "quantitative",
          "aggregate": "sum",
          "stack": "zero",
          "bandPosition": 0.5
        },
        "text": {
          "title": null,
          "field": "xval",
          "type": "quantitative",
          "aggregate": "sum"
        },
        "color": {
          "condition": {"test": "datum.yval == 'top'", "value": "black"},
          "value": "white"
        },
        "order": {"field": "category"}
      }
    }
  ]
}