D3 Examples - Rect Polygon Intersection

xxxxxxxxxx
 
<!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>
​
    