What is a good way (both code-wise and performance-wise) to test if two shapes drawn by svg path is intersecting? I am doing this in d3 and is using the "cardinal-closed" line interpolation

More specifically, I am creating convex hulls (more plex than in the image), and I want to merge hulls if they overlap. It is easy to do if I use a "linear-closed" interpolation, because then I can use the vertices to calculate intersections, but the "cardinal-closed" interpolation looks better where I use it.

var v1 = [[100,100],[200,100],[200,200],[100,200]],
v2 = [[210,100],[310,100],[310,200],[210,200]];

var hull1 = d3.geom.hull(v1),
    hull2 = d3.geom.hull(v2);

var svg = d3.select("#foo")
    .append("svg");

var line = d3.svg.line()
    .interpolate("cardinal-closed")
    .x(function(d) {return d[0];})
    .y(function(d) {return d[1];});

svg.append("path")
    .attr("d", line(hull1));
svg.append("path")
    .attr("d", line(hull2));

Here is a jsfiddle. How do I test if these shapes are intersecting/overlapping?

What is a good way (both code-wise and performance-wise) to test if two shapes drawn by svg path is intersecting? I am doing this in d3 and is using the "cardinal-closed" line interpolation

More specifically, I am creating convex hulls (more plex than in the image), and I want to merge hulls if they overlap. It is easy to do if I use a "linear-closed" interpolation, because then I can use the vertices to calculate intersections, but the "cardinal-closed" interpolation looks better where I use it.

var v1 = [[100,100],[200,100],[200,200],[100,200]],
v2 = [[210,100],[310,100],[310,200],[210,200]];

var hull1 = d3.geom.hull(v1),
    hull2 = d3.geom.hull(v2);

var svg = d3.select("#foo")
    .append("svg");

var line = d3.svg.line()
    .interpolate("cardinal-closed")
    .x(function(d) {return d[0];})
    .y(function(d) {return d[1];});

svg.append("path")
    .attr("d", line(hull1));
svg.append("path")
    .attr("d", line(hull2));

Here is a jsfiddle. How do I test if these shapes are intersecting/overlapping?

• javascript
• svg
• d3.js
• convex-hull

• I think you would have to get into the nitty-gritty of how cardinal-closed paths are made. Like, if you set that to linear, the two shapes don't intersect. So something about the way this (en.wikipedia/wiki/Cubic_Hermite_spline#Cardinal_spline) happens would have to be taken into account when ing up with a test – elsherbini Commented Jun 19, 2013 at 23:49
• 7 You can use the wonderful intersection library from Kevin Lindsey to test if any two SVG shapes intersect. – Phrogz Commented Jun 20, 2013 at 3:32
• Thank you @Phrogz, that library is indeed wonderful!! :) – swenedo Commented Jun 20, 2013 at 7:55

1 Answer 1

As @Phrogz said you should probably use the intersection library.