Добавить кольца в согласованный круг хеширования для представления данных

Question

Я реализую согласованное хеширование и, следовательно, рисую круг с секторами, как показано в демонстрации круга. Секторы представляют узлы.

HTML-код, в котором находится мой круг:

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

Теперь я хочу добавить несколько точек (маленьких колец) по окружности круга, чтобы показать пару ключ-значение, которые принадлежат конкретному узлу.

Я пою HTML5 для моего круга.

После добавления данных (пара ключ-значение my circle), круг должен иметь несколько колец (или любых других представлений) на своей границе, как требуется для вывода круга

Как я могу добиться этого в HTML5? ТИА:)

Answer 1

Точка для данного сектора будет расположена в точке (xd, yd) на окружности на половине пути между точками сектора (x1,y1) и (x2,y2). Вычисление положения точки (xd, yd) будет аналогично вычислению секторов (x1,y1) и (x2,y2), но с углом, равным половине пути между углами, используемыми для вычисления (x1,y1) и (x2, у2). Если вы хотите разместить текст рядом с точкой и вне круга, тогда вычисление положения текста (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());

  }

}