在JS

Question

我有一个带有元素组的SVG（它们都是统一的形状，但组形状可以变化。显然在组上放置一个轮廓将给我一个矩形形状。我想要实现的是一个概述的多边形小组粗略地描述了这些项目：

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

（下面是圆圈的示例，虽然还包含了一个路径示例，因为这就是我实际给出的内容）

<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>

我需要能够在JS中自动执行此操作，但获得圆圈的x和y给我中心点，所以我的手册我不得不作弊扩展到圆圈的外形并删除不必要的点（即指向同一行或中间的点）。

Answer 1

听起来你正在寻找的是convex hull点。

D3.js实现了这一点，可以找到一个很好的例子here。 （代码相当冗长，所以我不会在这里重现它;感兴趣的主要功能是d3.geom.hull）

请注意，D3.js v4刚刚发布，几乎所有在线代码（包括我链接的代码）都是为v3编写的。两者之间存在重大变化，但v4仍然有convex hull function。