SVG - 创建一条路径以连接圆组的中点并进一步延伸到第一个和最后一个圆的圆周点

Question

我正在尝试为给定原点 (x,y) 和半径的一组圆创建标题中描述的路径。用原点坐标形成路径会根据圆的对齐方式给出一条连接中点的线，但我想进一步延伸到点，直到它们与组中第一个和最后一个圆的圆周重叠。我的目的是为一组圆圈创建一个掩蔽路径。

我有什么：
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>

我想要达到的目标：
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> 

注意：以上，我已经手动配置了路径点以用于表示目的，但我正在寻找一种方法来以编程方式为任何线性排列的圆导出路径点。

另一个SOF question，指出如何导出给定圆的半径的圆周上的点和角度的原点，但在我的情况下，角度取决于圆组的排列，我无法弄清楚。

Answer 1

您可以使用内置的 d3 凸包算法来做到这一点：

//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"; });

工作代码here

希望这会有所帮助！