SVG

Question

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

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

希望对您有所帮助！

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

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

d3.js

snap.svg