D3 Examples - Path finding by 'A Star'(A* algorithm)

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="pathfinding_browser.min.js"></script>
  <script src="network.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.ticks {
  font: 10px sans-serif;
}
.track,
.track-inset,
.track-overlay {
  stroke-linecap: round;
}
.track {
  stroke: #000;
  stroke-opacity: 0.3;
  stroke-width: 10px;
}
.track-inset {
  stroke: #ddd;
  stroke-width: 8px;
}
.track-overlay {
  pointer-events: stroke;
  stroke-width: 50px;
  stroke: transparent;
  cursor: ew-resize;
}
.handle {
  fill: #fff;
  stroke: #000;
  stroke-opacity: 0.5;
  stroke-width: 1.25px;
}
​
.mesh {
  fill: none;
  stroke: #333;
  stroke-width: .5px;
  stroke-linejoin: round;
}
​
.play circle {
  fill: white;
  stroke: black;
  stroke-width: 1px;
}
​
.play:hover path {
  fill: blue;
}
​
.play.mousedown circle {
  fill: red;
}
​
.play.mousedown path {
  fill: white;
}
​
.play rect {
  fill: none;
  pointer-events: all;
  cursor: pointer;
}
​
.ring {
  fill: none;
  stroke: red;
  stroke-width: 3px;
  stroke-linejoin: round;
}
​
</style>
</head>
​
<body>
    <input type="hidden" class="objectPolygon" objectNo="6" polygonNo="7" x="-50" y="-50" objectType="02" points="493,32.25782012939453_493,57.257816314697266_547,57.257816314697266_547,31.75782012939453"/>
            
    <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>
    
    <div>
        <svg id="controller" width="1000" height="50"></svg>
    </div>
  
  <script>
    
    var networkWidth = 1000;
        var networkHeight = 300;
            
        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);
      
      
    });
    
    // 이동통로
    $(".objectPolygon[objectType=02]").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.drawExit(objectNo, polygonNo, points, x, y);
                
    });
    
    var exits = nt.intersectObject();
    
    var normalWalkers = nt.createWalkers(20, 'normal');
    
    nt.ready(normalWalkers, exits);
        
  </script>
  
</body>
    