Vega-Lite：如何在圆环图中包含图像标记？

Question

我希望我的圆环图周围有图像标记而不是文本。图像标记的示例使用 x 和 y 作为其坐标。对于我们使用半径和 theta 的圆环图，我应该如何调整它？

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with labels.",
  "data": {
    "values": [
      {"category": "a", "value": 4, "image": url},
      {"category": "b", "value": 6, "image": url},
      {"category": "c", "value": 10, "image": url},
      {"category": "d", "value": 3, "image": url},
      {"category": "e", "value": 7, "image": url},
      {"category": "f", "value": 8, "image": url}
    ]
  },
  "encoding": {
    "theta": {"field": "value", "type": "quantitative", "stack": true},
    "color": {"field": "category", "type": "nominal", "legend": null}
  },
  "layer": [{
    "mark": {"type": "arc", "outerRadius": 80}
  }, {
    "mark": {"type": "text", "radius": 90},
    "encoding": {
      "text": {"field": "category", "type": "nominal"}
    }
  }],
  "view": {"stroke": null}
}

新织女星版本：

Open the Chart in the Vega Editor

Answer 1

经过一些尝试和阅读文档，似乎 Image Mark 无法通过 theta 编码定位，但示例显示支持 x 和 y 编码。

因此，我通过简单的三角函数和一个额外的层来计算出这个位置来将图像放置在甜甜圈中：

{
    "transform": [
        {"joinaggregate": [{"op":"sum", "field": "value", "as": "total"}]},
        {
            "window": [{"op": "sum", "field": "value", "as": "cum"}],
            "frame": [null, 0]
        },
        {"calculate": "cos(2*PI*(datum.cum-datum.value/2)/datum.total)", "as": "y"},
        {"calculate": "sin(2*PI*(datum.cum-datum.value/2)/datum.total)", "as": "x"}
    ],
    "mark": {"type": "image", "width": 20, "height": 20},
    "encoding": {
        "url": {"field": "image"},
        "x": {"field": "x", "type": "quantitative", "scale": {"domain": [-2, 2]}, "axis": null},
        "y": {"field": "y", "type": "quantitative", "scale": {"domain": [-2, 2]}, "axis": null}
    }
}

Yet another Vega Editor

由于下面评论中提到的 color 编码打乱了顺序，因此添加了一个新的 window 转换以生成一个额外的排序字段，该字段提供给 color 字段

Renewed Vega Editor

进行了 3 次更改：(2021-07-16)

在 ycalculate 中使用 cos
在 x

calculate

弄乱数据值以检查是否有效

Old & Wrong Vega Editor

Vega-Lite：如何在圆环图中包含图像标记？

Vega-Lite: How do I include image marks in a doughnut chart?

vega-lite

vega