venn图label无法设置到圆圈外 #3974

设置到圈外的话，是不是可读性就不是很好了。

我们的设计是这个样子的

------------------ 原始邮件 ------------------ 发件人: @.*>; 发送时间: 2022年6月10日(星期五) 下午5:19 收件人: *@.>; 抄送: @.*>; *@.>; 主题: Re: [antvis/G2] venn图label无法设置到圆圈外 (Issue #3974)

设置到圈外的话，是不是可读性就不是很好了。

— 直接回复此邮件，在 GitHub 上查看或取消订阅. 您收到这个消息是因为您编写了这个线程。留言 ID @.***与>

你就好像没有发出来图。

还没收到吗

------------------ 原始邮件 ------------------ 发件人: @.*>; 发送时间: 2022年6月22日(星期三) 上午10:00 收件人: *@.>; 抄送: @.*>; *@.>; 主题: Re: [antvis/G2] venn图label无法设置到圆圈外 (Issue #3974)

你就好像没有发出来图。

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

哥，别用邮件直接回复~

那应该怎么回复呀

------------------ 原始邮件 ------------------ 发件人: @.*>; 发送时间: 2022年6月22日(星期三) 中午11:11 收件人: *@.>; 抄送: @.*>; *@.>; 主题: Re: [antvis/G2] venn图label无法设置到圆圈外 (Issue #3974)

哥，别用邮件直接回复~

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

可以看到了吧

@hustcc 看到了吗

看到了，这个图有个问题：最外层的 3 个区域，使用连接线展示，内部的区域却没有。当前 G2 确实不支持这样显示在外面，如果做的话，只能业务代码中用 html 盖上来。

怎么覆盖？这3个圆的位置和大小又不知道

------------------ 原始邮件 ------------------ 发件人: @.*>; 发送时间: 2022年6月22日(星期三) 中午1:07 收件人: *@.>; 抄送: @.*>; *@.>; 主题: Re: [antvis/G2] venn图label无法设置到圆圈外 (Issue #3974)

看到了，这个图有个问题：最外层的 3 个区域，使用连接线展示，内部的区域却没有。当前 G2 确实不支持这样显示在外面，如果做的话，只能业务代码中用 html 盖上来。

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

怎么获取3个圆的原心位置和半径呀？ @hustcc

怎么获取3个圆的原心位置和半径呀？ @hustcc

这个其实有点麻烦，需要通过 chart.middleGroup 拿到对应的圆的 shape，然后拿到 bbox 就是图形的位置和大小，你就可以计算出他的中心点了。

1. 可以打开这个案例：https://g2plot.antv.vision/zh/examples/more-plots/venn#basic
2. 用以下代码

   const vennShapes = plot.chart.middleGroup.findAll((e) => e.cfg.name && e.cfg.name.includes('venn-shape'));
   vennShapes[0].getBBox()

3. 通过 bbox 计算中心