Question

我使用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张图像（racoon图像） - 但在rael生活中，它们将随机放置在页面中。

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

线条不必是笔直的，但看起来应该不错，所以首选圆线。

修改为了让它更容易 - 说我想在两个一个接一个点击的图像之间画一个箭头（一个箭头从第一个图像点击到第二个），然后让我说我点击了第一个图像然后是最后一个 - A简单的直线将穿过所有其他图像。相反，我想绘制一条圆线，它将在所有其他图像的上方/下方连接并连接两者。

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

在D3或Vivus.js库中有优雅的方法吗？

Answer 1

你的意思是图像的Voronoi细胞？如果图像具有大小，则不一定存在无限线分隔两个图像，但不触及任何其他图像图像，即使你限制随机图像永远不会重叠。

对于非点细胞的Voronoi digrams有点棘手计算。但是你可以很容易地得到足够好的答案。对于每张图像，拍摄最近的图像，然后画一条线垂直于它们之间的线（无论如何定义）使它不与任何一个图像相交。然后消除任何位于该线同一侧的图像，和采取下一个最近的，直到没有剩下的点。你现在具有包围图像的多边形，或者如果它是边缘图像，一个半开放的空间。现在把它指向一个“完成”列表，与其邻居和分离线附加。转到下一个点。如果它有任何“完成”的邻居，消除线路错误一侧的所有点。然后重复这个过程，直到完成所有要点。

D3 - 在两个不与其他对象相交的对象之间绘制一条线

1 个答案: