Add rings to consistent hashing circle to represent data

Question

I am implementing consistent hashing and hence drawing a circle with sectors as shown in the Circle Demo. The sectors represents the Nodes.

The HTML withing which my Circle resides is :

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

Now I want to add some dots(small rings) over the circumference of the circle to show the key-value pair that belong to a particular node.

I am sing HTML5 for my circle.

After adding the data(key value pair my circle) , the circle should have some rings(or any other representations) on its boundary like required circle output

How can I achieve this in HTML5 ? TIA :)

score 0 · Answer 1 · answered Dec 02 '15 at 16:41

The dot for a given sector will be positioned at a point (xd,yd) on the circumference half ways between the sector's (x1,y1) and (x2,y2) points. Calculating the dot's position (xd,yd) will be similar to calculating the sector's (x1,y1) and (x2,y2) but with an angle that is half ways between the anlges used for calculating (x1,y1) and (x2,y2). If you wish to place text near the dot and outside the circle then calculating the text's position (xt,yt) will be similar to calculating the dot's position (xd,yd) but with a larger radius. For example, the existing addSector() function could be modified to...

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());

  }

}

Add rings to consistent hashing circle to represent data

1 Answers1