CODEWITHSUNDEEP
javascriptd3.jssvgvivus
Yuval
Yuval

Reputation: 381

D3 - drawing a line between two object not intersecting other objects

I have the following code using D3 library for example:

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

Which draws 7 images (racoon images) diagonally on the page - but in rael life they will be randomly placed in the page.

I want to draw lines between pairs of images, without any line intersect with any of the other images (if possible). It is important that the calculation will not be done according to the given example only, but for every scattering possible.

The lines don't have to be straight, though it should be nice to look, so rounded lines are preferred.

edit: To make it easier - Say I want to draw an arrow between two images which were clicked one after another (An arrow that goes from the first image clicked to the second), and lets say I clicked the first image and then the last - A simple straight line will go across all other images. Instead, I would like to draw a round line that will go above/under all the other images and connect the two.

I came across a library called vivus.js which draws paths using SVG, maybe I can find my answers within it?

Is there an elegant way to do so within D3 or Vivus.js libraries?

Upvotes: 0

Views: 801

Answers (1)

Malcolm McLean
Malcolm McLean

Reputation: 6404

You mean Voronoi cells for the images? If the images have size, there isn't necessarily an infinite line that separates two images but doesn't touch any of the other images, even if you constrain the random images never to overlap.

Voronoi digrams for non-points cells are a bit tricky to calculate. But you can get a good enough answer easily enough. For each image, take the nearest image, and draw a line perpendicular to the line between them (however defined) such that it doesn't intersect either image. Then eliminate any images that lie the same side of that line, and take the next nearest, until no points are left. You now have either a polygon enclosing the image, or, if it is an edge image, a half-open space. Now put the point into a "done" list, with its neighbours and separation lines attached. Move to the next point. If it has any "done" neighbours, eliminate all points on the wrong side of the lines. Then repeat the process, until all the points are done.

Upvotes: 0

Related Questions