如何在geoView上添加interval(饼图)？

[CullenNg]

问题描述

如何在 geoView 上添加 “饼图” ？ 有例子可以提供吗？

想要实现如下效果：

目前成功添加了 "point" 和 “text"，但是 “interval” 不成功；

🙏🙏🙏

重现链接

https://codesandbox.io/p/sandbox/map-pie-j2vrwl?file=%2Findex.ts%3A7%2C36

重现步骤

No response

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[pearmini]

这里的 point 和 text 都是一个数据对应一个图形，所以相同的 interval 只能绘制一个条，并不能绘制完整的饼图。如果希望实现图中效果的话，目前比较好的方法是用 Point Mark + 自定义饼图形状。

function ShapePie(style, context) {
  const { document } = context;
  return (...context) => {
     // 这里根据 context 去绘制饼图
     // 借助 d3 计算饼图的 path
  };
}

register("shape.point.pie", ShapeTriangle);

chart.options({
  children: [
    {
      type: 'point',
      data: londonCentroids,
      encode: {
        x: 'cx',
        y: 'cy',
        shape: 'pie',
      },
    },
  ],
});