score:1

Accepted answer

You can do this with the inbuilt d3 convex hull algorithm:

//make some points
var data = [[140,130],[140,150],[140,180], [150,250]];
//radius of the circle
var radius = 5;
//make svg
var svg = d3.select("body").append("svg").attr("width", 500).attr("height", 600).append("g");
//make as many circle as many data points
var circleEnter = svg.selectAll("circle").data(data).enter().append("circle").attr("cy", function(d) {
  return d[1]
}).attr("cx", function(d) {
  return d[0]
}).attr("r", function(d) {
  return radius;
}).style("fill", "steelblue");
//the inbuilt convex hull algo to get the path
var hull = svg.append("path")
    .attr("class", "hull");
//make the d attribute depending on the algo
hull.datum(d3.geom.hull(data)).attr("d", function(d) { return "M" + d.join("L") + "Z"; });

working code here

Hope this helps!


Related Query