D3 - 在两个不与其他对象相交的对象之间画一条线答案

【问题标题】：D3 - drawing a line between two object not intersecting other objectsD3 - 在两个不与其他对象相交的对象之间画一条线
【发布时间】：2016-03-14 20:20:37
【问题描述】：

例如，我有以下使用 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 个图像（浣熊图像） - 但在现实生活中，它们将随机放置在页面中。

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

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

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

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

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

【问题讨论】：

标签： javascript d3.js svg vivus

【解决方案1】：

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

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

【讨论】：

感谢您的回答，但不幸的是，要么我不明白，要么您回答了不同的问题 - 我想用一条线连接图像（箭头可以说从一个图像到另一个图像）而且我不希望它与任何其他图像相交（上下），因此所有图像都是可见和可读的。
哦，我没发现。您想要一个所有连接图，完全没有任何自相交，并且线尽可能直？
我的问题不够清楚，我编辑了它，谢谢。我可以接受与自己相交的线，但不能与其他图像相交。线条不应该是笔直的，但也不能凌乱，这样才会“好看”。我知道不可能对每个给定的图像顺序，但假设它是可能的，我该怎么做？