Skip to content

Instantly share code, notes, and snippets.

@danharr
Last active December 14, 2016 10:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danharr/3931242a8b5a1a76d2a3 to your computer and use it in GitHub Desktop.
Save danharr/3931242a8b5a1a76d2a3 to your computer and use it in GitHub Desktop.
Intersection not working
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>finding intersections</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://surfcity.googlecode.com/svn-history/r21/trunk/kevlindev/concats/2D.js"></script>
<style>
.line {
fill: none;
stroke-width: 4;
stroke:#0099FF;
opacity:0.9;
}
p {
font-family: arial;
font-size:14px;
}
</style>
</head>
<body>
<script type="text/javascript">
var ampersand = "m 25.253814,263.43304 c 29.889958,-2.86317 58.545065,-17.13799 78.834896,-39.27235 20.28984,-22.13436 32.02373,-51.92028 32.28188,-81.94595 0.085,-9.89205 -1.04195,-19.84619 -4.01598,-29.28097 -2.97403,-9.43478 -7.83912,-18.348108 -14.68303,-25.490996 -6.84391,-7.142888 -15.71705,-12.454265 -25.405541,-14.452525 -9.688493,-1.99826 -20.165512,-0.550977 -28.626429,4.574727 -5.188274,3.143106 -9.550697,7.596511 -12.744592,12.753675 -3.193895,5.157164 -5.228714,11.005829 -6.110217,17.007519 -1.763005,12.00338 1.113557,24.4115 6.744363,35.15781 5.630806,10.74631 13.897258,19.93557 23.086091,27.85735 9.188834,7.92178 19.326581,14.65516 29.430455,21.37088 21.31564,14.16783 42.78425,28.45003 66.41861,38.2735 23.63436,9.82347 49.86181,15.0114 75.00275,10.21383 17.38763,-3.31803 33.85857,-11.4293 46.97304,-23.31835 13.11448,-11.88905 22.81652,-27.5345 27.47032,-44.61317 4.6538,-17.07868 4.21991,-35.53447 -1.3949,-52.32175 -5.61481,-16.78728 -16.41066,-31.827843 -30.62205,-42.381294 -18.01034,-13.374571 -41.59211,-19.254917 -63.63973,-15.113177 -22.04761,4.14174 -42.12872,18.469302 -52.52782,38.346681 -9.19259,17.57119 -10.64421,38.7664 -5.20336,57.83594 5.44085,19.06954 17.4929,35.97405 32.92218,48.43147 15.42928,12.45743 34.11523,20.58238 53.50223,24.75305 19.387,4.17067 39.47759,4.47953 59.19016,2.31968 30.86169,-3.38142 61.54458,-13.07964 86.43024,-31.64255 24.88566,-18.56291 43.4776,-46.59785 46.90989,-77.45392 2.74568,-24.68352 -4.56686,-50.497752 -20.52732,-69.526121 -15.96046,-19.028369 -40.50194,-30.799045 -65.33564,-30.478985 -26.78563,0.345216 -52.70409,14.771188 -68.27353,36.569852 -15.56944,21.798663 -20.86604,50.308294 -15.56914,76.567234 3.94617,19.56282 13.48634,37.83595 26.53449,52.93635 13.04815,15.1004 29.53092,27.07709 47.5016,35.75644 35.94135,17.3587 77.02005,21.41106 116.88275,19.39353 21.23813,-1.0749 42.58462,-3.83801 62.60076,-11.01906 20.01614,-7.18105 38.73658,-19.03432 51.66543,-35.91799 12.92884,-16.88367 19.56769,-39.09119 15.37949,-59.93999 -2.09411,-10.4244 -6.84855,-20.34883 -13.92903,-28.28105 -7.08049,-7.93221 -16.50004,-13.818185 -26.82323,-16.36479 -9.17554,-2.263495 -18.9512,-1.874954 -28.00571,0.832427 -9.05451,2.70738 -17.3807,7.700663 -24.23856,14.203263 -13.71572,13.0052 -21.22519,31.76653 -22.50702,50.62423 -1.25025,18.3932 3.18639,37.13355 12.55063,53.01384 9.36425,15.8803 23.61617,28.83281 40.31669,36.64084 16.70052,7.80804 35.77842,10.4383 53.96872,7.44065 18.1903,-2.99765 35.41541,-11.61043 48.72745,-24.36435";
var svg = d3.select("body").append("svg")
.attr("width", 800)
.attr("height", 300);
var path = svg.append("svg:path")
.attr("d",ampersand)
.style("stroke-width", 2)
.style("stroke", "steelblue")
.style("fill", "none");
// Taken from http://stackoverflow.com/questions/332422/how-do-i-get-the-name-of-an-objects-type-in-javascript
Object.prototype.getName = function() {
var funcNameRegex = /function (.{1,})\(/;
var results = (funcNameRegex).exec((this).constructor.toString());
return (results && results.length > 1) ? results[1] : "";
};
// Taken from http://stackoverflow.com/questions/9229645/remove-duplicates-from-javascript-array
function uniq(a) {
var prims = {"boolean":{}, "number":{}, "string":{}}, objs = [];
return a.filter(function(item) {
var type = typeof item;
if(type in prims)
return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true);
else
return objs.indexOf(item) >= 0 ? false : objs.push(item);
});
}
var pathEl = path.node();
var intersections = [];
// Kevin Lindsey's library
var shape1 = new Path(pathEl);
var overlays = Intersection.intersectShapes(shape1, shape1);
for (i in overlays.points) {
if (overlays.points[i].getName() == "Point2D") {
intersections.push(overlays.points[i]);
}
}
// The path will record 2 points for each intersection, so deduping is necessary
var deduped_intersections = uniq(intersections);
var circles = svg.selectAll("circle")
.data(deduped_intersections)
.enter()
.append("circle");
var circleAttributes = circles
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.attr("r", "3")
.style("fill", "red");
d3.select('body').selectAll("points").data(intersections).enter().append("p").html(function(d) {return d.x+","+d.y});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment