Question

用于数据可视化，将n-circel对齐在圆上。这只是工作正常 - 但我不知道如何阻止圈子相互重叠。这里的任何人都知道怎么做？

结果应该像这个草图一样工作：

链接：http://www.xup.to/dl,79345003/sketch.jpg

所以我不知道如何计算第二个节点的角度 - 基于半径的第一个节点的位置 - 和第二个半径...

JSFIDDLE显示我的意思：http://jsfiddle.net/0z9hyvxk/

var canvas = document.getElementById("canvas");
var stage = new createjs.Stage(canvas);

canvas.width  = 500;
canvas.height = 500;

var midx     = 250;
var midy     = 250;
var radius   = 200;
var angle    = 0;
var count    = 30;
var step     = 2 * Math.PI / count;
var xpos;
var ypos;
var nodeSize;

var node = function(size){
    var dot = new createjs.Shape();
        dot.graphics.beginFill("#000").drawCircle(0, 0, size);
        dot.x = dot.y = -5;
        dot.alpha = .25;

    return dot
};

for(var i = 0; i<count; i++)
{
    xpos = radius * Math.cos(angle) + midx;
    ypos = radius * Math.sin(angle) + midx;

    nodeSize = i;

    var n = new node(nodeSize);
        n.x = xpos;
        n.y = ypos;
    stage.addChild(n)

    angle += step;
}

stage.update();

提前谢谢西蒙

Answer 1

您的程序不会根据圆圈大小和角度进行更正。较小的圆圈彼此相距太远，较大的圆圈太近了。

r1 = radius of the n-th small circle
r2 = radius of the (n+1)-th small circle.
r3 = radius of the (n+2)-th small circle

r1<r2<3，因此1和2之间的角度小于2到3之间。

尝试切向增加角度校正。我无法在工作中测试代码：（

在圆上对齐和圆圈＆gt;没有重叠

1 个答案: