graph1.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <html>
  2. <header>
  3. <script type="text/javascript" src="graph1-js/raphael-min.js"></script>
  4. <script type="text/javascript" src="graph1-js/graffle.js"></script>
  5. <script type="text/javascript" src="graph1-js/graph.js"></script>
  6. <script type="text/javascript">
  7. var redraw;
  8. var height = 600;
  9. var width = 800;
  10. /* only do all this when document has finished loading (needed for RaphaelJS */
  11. window.onload = function() {
  12. var g = new Graph();
  13. g.addEdge("n1", "n2");
  14. g.addEdge("n1", "n3");
  15. g.addEdge("n1", "n4");
  16. g.addEdge("n2", "n3");
  17. g.addEdge("n4", "n3");
  18. /* layout the graph using the Spring layout implementation */
  19. var layouter = new Graph.Layout.Spring(g);
  20. layouter.layout();
  21. /* draw the graph using the RaphaelJS draw implementation */
  22. var renderer = new Graph.Renderer.Raphael('canvas', g, width, height);
  23. renderer.draw();
  24. redraw = function() {
  25. layouter.layout();
  26. renderer.draw();
  27. };
  28. };
  29. </script>
  30. </header>
  31. <body>
  32. <div id="canvas"></div>
  33. <button id="redraw" onclick="redraw();">redraw</button>
  34. </body>
  35. </html>