D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
riuzzang
Full window
Github gist
Rect Polygon Intersection
Reference
Chuck Grimmett - Let's Make a Grid with D3.js
Mike Bostock - Circle-Polygon Intersection
d3-polygon - polygonContains
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="network.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <input type="hidden" class="objectPolygon" objectno="6" polygonno="7" x="-50" y="-50" objecttype="02" points="493,39_491.9999809265137,58.0078125_547.9999771118164,59.0078125_546.9999771118164,40.007816314697266"> <input type="hidden" class="objectPolygon" objectno="3" polygonno="4" x="-50" y="-50" objecttype="01" points="1367.2499389648438,668.7578125_1502.375,667.7578125_1501.2499389648438,4.2578125"> <input type="hidden" class="objectPolygon" objectno="11" polygonno="12" x="-50" y="-50" objecttype="01" points="333.00000762939453,421.00781375_320.00000762939453,421.00781375_320.00000762939453,479.00781375_436,363.00781375_433,330.00781375_333.00000762939453,330.00781375"> <input type="hidden" class="objectPolygon" objectno="11" polygonno="12" x="-50" y="-50" objecttype="01" points="522.9999847412109,290.00781756469723_524.9999847412109,344.00781374999997_552.9999847412109,366.00781374999997_651.9999847412109,391.00781374999997_650.9999847412109,236.00781661102295_640.9999847412109,224.00781756469726"> <input type="hidden" class="objectPolygon" objectno="11" polygonno="12" x="-50" y="-50" objecttype="01" points="566,398.7578061206055_509.99999237060547,399.7578061206055_555,478.75779849121096_582,478.75779849121096_637,439.75779849121096_631,418.7578061206055"> <input type="hidden" class="objectPolygon" objectno="12" polygonno="13" x="-50" y="-50" objecttype="01" points="473.5,149.50000585144045_473.5,239.50000012939455_484.5,249.50000012939455_535.5,249.50000012939455_623.5,198.50000775878908_624.5,188.50000775878908_528.5,148.50000585144045"> <input type="hidden" class="objectPolygon" objectno="12" polygonno="13" x="-50" y="-50" objecttype="01" points="682.0000114440918,209.00780375_682.0000114440918,329.00780375_840.0000152587891,329.00780375_868.0000152587891,265.00780375_866.0000152587891,220.00780375_801.0000152587891,199.00780375_705.0000076293945,200.00780375"> <input type="hidden" class="objectPolygon" objectno="12" polygonno="13" x="-55.0" y="-50" objecttype="01" points="347,187.99999892060546_407,248.00000655_440,248.00000655_445,240.00000655_423,161.00000273530273_414,149.00000273530273_348,148.00000273530273"> <div id="grid"></div> <script> var networkWidth = 900; var networkHeight = 500; var cellWidth = 10; var cellHeight = 10; var nt = new Network("grid", networkWidth+2, networkHeight+2, cellWidth, cellHeight); //nt.loadImage(networkWidth, networkHeight, "b1.png"); nt.drawNetwork(networkWidth, networkHeight, cellWidth, cellHeight); // 장애물 $(".objectPolygon[objectType=01]").each(function(){ var objectNo = $(this).attr("objectNo"); var polygonNo = $(this).attr("polygonNo"); var points = $(this).attr("points").replace(/_/g, ' '); var x = $(this).attr("x"); var y = $(this).attr("y"); nt.drawObject(objectNo, polygonNo, points, x, y); nt.intersectObject(); }); </script> </body>
https://d3js.org/d3.v4.min.js
https://code.jquery.com/jquery-3.2.1.min.js