如何在 vega-lite 中更改饼图文本标签的颜色

Question

我有这个代表特定数据集的小图。正如您在代码片段中看到的那样，文本标签当前以与饼图组件本身相同的颜色显示，因此当位于饼图中时是不可见的（如果您更改

mark: {type: "text", radius: 70},

到

mark: {type: "text", radius: 120},

因为文本标签将位于饼图弧形区域之外。因为我希望文本标签出现在圆弧内，所以我希望它们是黑色或白色。有没有人碰巧知道我如何实现这一目标？

vegaEmbed("#graph", {
  $schema: "https://vega.github.io/schema/vega-lite/v5.json",
  data: {
    values: [{
        event: "a",
        occurances: 28,
      },
      {
        event: "b",
        occurances: 3,
      },
      {
        event: "c",
        occurances: 1,
      },
      {
        event: "d",
        occurances: 3,
      },
      {
        event: "e",
        occurances: 1,
      },
      {
        event: "f",
        occurances: 10,
      },
      {
        event: "g",
        occurances: 2,
      },
      {
        event: "h",
        occurances: 1,
      },
      {
        event: "k",
        occurances: 1,
      },
    ],
  },
  layer: [{
      mark: {
        type: "arc",
        innerRadius: 50,
        outerRadius: 100
      },
    },
    {
      mark: {
        type: "text",
        radius: 70
      },
      encoding: {
        text: {
          field: "occurances",
          type: "quantitive"
        },
      },
    },
  ],
  mark: {
    type: "arc",
    innerRadius: 50,
    outerRadius: 100
  },
  encoding: {
    color: {
      field: "event",
      type: "nominal",
    },
    theta: {
      field: "occurances",
      type: "quantitative",
      stack: true,
    },
  },
});

<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
<div id="graph"></div>

Answer 1

将整个编码放在外面以保持两层通用，并在标记 text 中提供 fill 以应用一些颜色。

参考下面的代码或editor link:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"event": "a", "occurances": 28},
      {"event": "b", "occurances": 3},
      {"event": "c", "occurances": 1},
      {"event": "d", "occurances": 3},
      {"event": "e", "occurances": 1},
      {"event": "f", "occurances": 10},
      {"event": "g", "occurances": 2},
      {"event": "h", "occurances": 1},
      {"event": "k", "occurances": 1}
    ]
  },
  "encoding": {
    "color": {"field": "event", "type": "nominal"},
    "theta": {"field": "occurances", "type": "quantitative", "stack": true}
  },
  "layer": [
    {"mark": {"type": "arc", "innerRadius": 50, "outerRadius": 100}},
    {
      "mark": {"type": "text", "radius": 70, "fill": "black"},
      "encoding": {"text": {"field": "occurances", "type": "quantitative"}}
    }
  ]
}

如何在 vega-lite 中更改饼图文本标签的颜色

How to change the color of the text lables of a pie chart in vega-lite

html

javascript

vega

vega-lite