0

例如，我有以下代码使用 D3 库：

<html>
<body>
    <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
        var points = [{x: 100, y:100}, {x: 200, y:200}, {x: 300, y:300}, {x: 400, y:400}, {x: 500, y:500}, {x: 600, y:600}, {x: 700, y:700}];
        var width = 1000;
        var height = 1000;
        var racoonWidth = 100;
        var racoonHeight = 100;
        var svg = d3.select("body").append("svg").attr({width: width, height: height});
        var g = svg.append("g");
        var racoons = g.selectAll("svg").data(points).enter().append("svg:image")
                    .attr({"xlink:href": "http://www.clker.com/cliparts/1/4/5/a/1331068897296558865Sitting%20Racoon.svg",
                    width: racoonWidth, height: racoonHeight, x: function(d){return d.x}, y: function(d){return d.y}});
    </script>
</body>
</html>

它在页面上对角绘制 7 个图像（浣熊图像） - 但在现实生活中，它们将随机放置在页面中。

我想在成对的图像之间画线，没有任何线与任何其他图像相交（如果可能的话）。重要的是，计算不会仅根据给定的示例进行，而是针对每个可能的散射进行。

线条不一定要笔直，但看起来应该很好看，所以最好是圆形的线条。

编辑： 为了使它更容易 - 假设我想在两个图像之间绘制一个箭头，这些图像一个接一个地被点击（从第一个图像点击到第二个的箭头），假设我点击了第一个图像，然后是最后一个- 一条简单的直线将穿过所有其他图像。相反，我想画一条圆线，将在所有其他图像的上方/下方并将两者连接起来。

我遇到了一个名为 vivus.js 的库，它使用 SVG 绘制路径，也许我可以在其中找到答案？

在 D3 或 Vivus.js 库中是否有一种优雅的方式来执行此操作？

4

1 回答 1

0

你是说用于图像的 Voronoi 细胞？如果图像具有大小，则不一定存在分隔两个图像但不接触任何其他图像的无限线，即使您限制随机图像从不重叠。

非点单元格的 Voronoi digram 计算起来有点棘手。但是你可以很容易地得到一个足够好的答案。对于每个图像，取最近的图像，并绘制一条垂直于它们之间的线（无论如何定义）的线，这样它就不会与任何一个图像相交。然后消除位于该线同一侧的任何图像，并取下一个最近的图像，直到没有留下任何点。您现在有一个包围图像的多边形，或者，如果它是边缘图像，则有一个半开放空间。现在将该点放入“完成”列表中，并附上它的邻居和分隔线。移动到下一个点。如果它有任何“完成”的邻居，请消除线条错误一侧的所有点。然后重复这个过程，直到所有的点都完成。

于 2016-03-13T17:59:04.160 回答