Math 六边形上的圆图

我想在六边形上画一个饼图。对此，可能有几种解决方案。图中是我的六边形和两个想法：

我的六边形（6个顶点，4个面）

它应该如何看结尾（没有灰线）

数学：我可以从对象获取一些信息来动态计算新顶点（从中心到每个点）以添加彩色面吗

剪裁：在一个球体上，一个饼图很容易，也许我可以剪裁三个对象（没有SVG.js！），这样我就可以看到带有剪裁图表的六边形了

---

three.js中的整个剪辑问题已经在这里解决了：，用一把小提琴显示了它的工作原理

所以我会选择“顶点”选项，或者更确切地说，一个函数，给定一个值列表，它会返回一个多边形列表，每个值对应一个多边形，它们是六边形的一部分，这样

• 它们都以中心点为顶点
• 它们在该点的角度与该值成正比
• 它们形成一个六边形的隔板

假设六边形内接在半径为R的圆中，并由顶点定义：

{（rsqrt（3）/2，R/2），（0，R），（-rsqrt（3）/2，R/2），（-rsqrt（3）/2，-R/2），（0，-R），（rsqrt（3）/2，-R/2）}

这很容易从cos（Pi/6）、sin（Pi/6）和各种对称性中得到

获取每个多边形中心的角度非常简单，因为它与圆的角度相同。现在我们需要知道六边形上点的位置

请注意，如果使用坐标轴的对称性，则只有两种情况：[0，Pi/6]和[Pi/6，Pi/2]，然后通过镜像获得结果。如果通过Pi/3使用旋转对称，则只有一种情况：[-Pi/6，Pi/6]，通过旋转得到结果

使用旋转对称 因此，对于每一点，你可以考虑它的角度在[-PI/ 6，π/6 ]之间。该部分六边形上的任何点都有

x=rsqrt（3）/2

，这大大简化了问题：我们只需找到它的y值

现在我们假设我们知道点的极坐标角，因为它与圆的极坐标角相同。让我们把它叫做beta，alpha，它的值用[-Pi/6，Pi/6]（模Pi/3）表示。我们不知道距离中心有多远，因此我们有以下系统：

由于cos在[-Pi/6，Pi/6]范围内从不为0，所以这一问题可以简单地解决

因此

d=rsqrt（3）/（2 cos（alpha））

，和

y=dsin（alpha）

现在我们知道了

• 与中心的角度

  beta

• 由于旋转对称，它距离中心的距离

  d

所以我们的观点是

（d cos（beta），d sin（beta））

代码 是的，我很好奇，所以我最后把它编码了。对不起，如果你想自己玩的话。它正在工作，并且最终非常难看（至少对于这个数据集），请参见JSFIDLE：

var R=100；
var hexagon=[{x:R*Math.sqrt（3）/2，y:R/2}，{x:0，y:R}，{x:-R*Math.sqrt（3）/2，y:R/2}，{x:-R*Math.sqrt（3）/2，y:-R/2}，{x:0，y:-R}，{x:R*Math.sqrt（3）/2，y:-R/2}]；
var hex_angles=[Math.PI/6，Math.PI/2，5*Math.PI/6，7*Math.PI/6，3*Math.PI/2，11*Math.PI/6]；
功能区域（值）
{
var i，总计=0，区域=[]；
对于（i=0；i您有什么问题-如何绘制正六边形、如何绘制扇形或其他？我谈论的是three.js（标记&我说的是three Object）.我已经构建了6个顶点和4个面的六边形，我想用这个3D对象构建一个饼图。但是怎么做呢？太神奇了，剪辑的东西可能会在将来对我有很大帮助，但是你的计算。我尝试了几次之后就停下来了，因为我的数学在这一点上很糟糕。谢谢你的帮助！但是我不知道如何将你的数学东西转换成3D几何图形试试看，你能删除所有颜色等的代码，让创建六边形的代码在里面吗？这在有顶点的3D中是可能的吗？我不知道你的3D顶点是什么样子，但这个答案中的代码只是获取六边形区域的代码。所以你可以取下它并调用区域（[数据数组]），然后它返回一组二维多边形，其中（0,0）为六边形的中心。然后，您可以按照自己的方式将其映射到三维点。这是一个非常好的答案，并解释了数学。继续努力！@Cimbali这是我当前的代码：我不知道如何在我的三维代码中使用您的代码。。
var R = 100;
var hexagon = [{x:R*Math.sqrt(3)/2, y:R/2}, {x:0, y:R}, {x:-R*Math.sqrt(3)/2, y:R/2}, {x:-R*Math.sqrt(3)/2, y:-R/2}, {x:0, y:-R}, {x:R*Math.sqrt(3)/2, y:-R/2}];
var hex_angles = [Math.PI / 6, Math.PI / 2, 5*Math.PI / 6, 7*Math.PI / 6, 3*Math.PI / 2, 11*Math.PI / 6];

function regions(values)
{
    var i, total = 0, regions = [];

    for(i=0; i<values.length; i++)
        total += values[i];

    // first (0 rad) and last (2Pi rad) points are always at x=R Math.sqrt(3)/2, y=0
    var prev_point = {x:hexagon[0].x, y:0}, last_angle = 0;

    for(i=0; i<values.length; i++)
    {
        var j, theta, p = [{x:0,y:0}, prev_point], beta = last_angle + values[i] * 2 * Math.PI / total;

        for( j=0; j<hexagon.length; j++)
        {
            theta = hex_angles[j];
            if( theta <= last_angle )
                continue;
            else if( theta >= beta )
                break;
            else
                p.push( hexagon[j] );
        }

        var alpha = beta - (Math.PI * (j % 6) / 3); // segment 6 is segment 0
        var d = hexagon[0].x / Math.cos(alpha);
        var point = {x:d*Math.cos(beta), y:d*Math.sin(beta)};

        p.push( point );
        regions.push(p.slice(0));

        last_angle = beta;
        prev_point = {x:point.x, y:point.y};
    }

    return regions;
}