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

Надеется, что это помогает!