SVG - Create a path to join midpoints of group of circles and further extend till circumference points of first & last circle

Question

I am trying to create a path as described in the title for a group of circles given their origin (x,y) and radius. Forming the path with points at origin co-ordinates gives a line joining midpoints as per the alignment of circles, but i want to extend to points further till they overlap with the circumferences of the first and last circle in the group. My intention here is to create a masking path for a set of circles.

What I have:
http://codepen.io/pri315/pen/JGXwEY

<path d="M 311.247 144.32 L 315.063 135.925 L 318.726 127.53 L 322.542 119.287Z" />
  <circle id="O_8_6" cx="311.247" cy="144.32" r="3.816"></circle>
  <circle id="O_8_7" cx="315.063" cy="135.925" r="3.816"></circle>
  <circle id="O_8_8" cx="318.726" cy="127.53" r="3.816"></circle>
  <circle id="O_8_9" cx="322.542" cy="119.287" r="3.816"></circle>

What I am trying to achieve:
http://codepen.io/pri315/pen/xZVmgG

  <path d="M 307.431 151.136 L 315.063 135.925 L 318.726 127.53 L 325.542 114.287" />
  <circle id="O_8_6" cx="311.247" cy="144.32" r="3.816"></circle>
  <circle id="O_8_7" cx="315.063" cy="135.925" r="3.816"></circle>
  <circle id="O_8_8" cx="318.726" cy="127.53" r="3.816"></circle>
  <circle id="O_8_9" cx="322.542" cy="119.287" r="3.816"></circle> 

Note: Above, I have manually configured the path points for representation purpose, But I am looking for a way to programmatically derive the path points for any linear arrangement of circles.

Another SOF question, points how to derive the point on circumference of a given circle's radius and origin for an angle, but in my case the angle depends on the arrangement of the circle group, which i am unable to figure out.

Answer 1

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!