通过JS中的一组元素在SVG中创建多边形

Question

I have an SVG with groups of elements (which are all a uniform shape but the group shape can vary. Obviously putting an outline on the group will give me a rectangle shape. What I am trying to achieve is a polygon that outlines the group giving a rough trace of the items:

http://codepen.io/wroughtec/pen/OXvRrq

(below is an example with circles although have also included a path example as that is what I am actually being given)

<h2>No Outline</h2>
<svg viewbox="0 0 1000 200">
  <g>
    <circle cx="20" cy="20" r="10" fill="grey" />
    <circle cx="50" cy="20" r="10" fill="grey" />
    <circle cx="50" cy="50" r="10" fill="grey" />
    <circle cx="80" cy="50" r="10" fill="grey" />
    <circle cx="110" cy="50" r="10" fill="grey" />
    <circle cx="140" cy="50" r="10" fill="grey" />
    <circle cx="50" cy="80" r="10" fill="grey" />
    <circle cx="80" cy="80" r="10" fill="grey" />
    <circle cx="110" cy="80" r="10" fill="grey" />
    <circle cx="140" cy="80" r="10" fill="grey" />
    <circle cx="170" cy="80" r="10" fill="grey" />
    <circle cx="200" cy="80" r="10" fill="grey" />
    <circle cx="170" cy="110" r="10" fill="grey" />
    <circle cx="200" cy="110" r="10" fill="grey" />
  </g>
</svg>

I need to be able to do this automatically in JS but getting the x and y of the circles gives me the center point so my manual one I have had to cheat to expand to the outer shape of the circles and remove unnecessary points (ie points on the same line or in the middle).

Answer 1

It sounds like what you're looking for is the convex hull of the points.

D3.js implements this, and a good example can be found here . (The code is rather lengthy, so I won't reproduce it here; the main function of interest is d3.geom.hull )

Note that D3.js v4 was just recently released, and almost all code online (including what I linked) is written for v3. There are significant changes between the two, but v4 still has a convex hull function .