0

我正在实现一致的散列，因此绘制了一个带有扇区的圆圈，如Circle Demo所示。扇区代表节点。

我的圈子所在的 HTML 是：

<div id="container1">
<div id="svgcontainer"></div>
</div>

现在我想在圆的圆周上添加一些点（小环）来显示属于特定节点的键值对。

我正在为我的圈子唱 HTML5。

添加 data(key value pair my circle) 后，圆的边界上应该有一些环（或任何其他表示），如所需的圆输出

如何在 HTML5 中实现这一点？蒂亚:)

4

1 回答 1

0

给定扇区的点将位于扇区 (x1,y1) 和 (x2,y2) 点之间的圆周上的点 (xd,yd)。计算点的位置 (xd,yd) 类似于计算扇区的 (x1,y1) 和 (x2,y2)，但角度是用于计算 (x1,y1) 和 (x2) 的角度的一半， y2)。如果您希望将文本放置在圆点附近和圆外，则计算文本的位置 (xt,yt) 将类似于计算点的位置 (xd,yd)，但半径更大。例如，现有的 addSector() 函数可以修改为...

function addSector() {

  sector++;

  group.clear();

  paper.clear();

  var start = 0;
  var angle = 360 / sector;
  var col = 0;

  var x1;
  var y1;
  var x2;
  var y2;
  var xd;
  var yd;
  var xt;
  var yt;

  var i;
  var path;
  var dot;
  var text;
  var textPadding = 15;

  for (i = 0; i < sector; i++) {

    x1 = Math.round((x + Math.cos(start * Math.PI / 180) * radius) * 100) / 100;
    y1 = Math.round((y + Math.sin(start * Math.PI / 180) * radius) * 100) / 100;

    x2 = Math.round((x + Math.cos((start + angle) * Math.PI / 180) * radius) * 100) / 100;
    y2 = Math.round((y + Math.sin((start + angle) * Math.PI / 180) * radius) * 100) / 100;

    path = paper.path("M" + x + "," + y + " L" + x1 + "," + y1 + " A" + radius + "," + radius + " 0 0 1 " + x2 + "," + y2 + "z");

    path.attr({"fill": colors[col], "stroke" : null});

    group.push(path);

    col++;

    if (col == colors.length) col = 0;

    start += angle;

  }

  for (i = 0; i < sector; i++) {

    start = i * angle;

    xd = Math.round((x + Math.cos((start + angle / 2) * Math.PI / 180) * radius) * 100) / 100;
    yd = Math.round((y + Math.sin((start + angle / 2) * Math.PI / 180) * radius) * 100) / 100;

    dot = paper.circle(xd, yd, 5);
    dot.attr({"fill": "#FFFFFF", "stoke": "#000000"});

    xt = Math.round((x + Math.cos((start + angle / 2) * Math.PI / 180) * (radius + textPadding)) * 100) / 100;
    yt = Math.round((x + Math.sin((start + angle / 2) * Math.PI / 180) * (radius + textPadding)) * 100) / 100;

    text = paper.text(xt, yt, i.toString());

  }

}
于 2015-12-02T16:41:13.700 回答