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

希望這有助於！