Html 向一致散列圆中添加环以表示数据

我正在实现一致的散列，因此用扇区画了一个圆圈，如图所示。扇区表示节点

my Circle所在的HTML是：

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

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

我正在为我的圈子唱HTML5

添加数据（键值对my circle）后，圆的边界上应该有一些环（或任何其他表示）

我如何在HTML5中实现这一点？

---

TIA:）

给定扇区的点将位于扇区（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());

  }

}

函数addSector（）{
行业++；
组。清除（）；
纸。清晰（）；
var start=0；
var角度=360/扇区；
var-col=0；
var-x1；
变量y1；
var-x2；
变量y2；
var-xd；
var yd；
var-xt；
var-yt；
var i；
var路径；
var点；
var文本；
var=15；
对于（i=0；i