Lab1

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

by downedcrane

HTML

<script src="https://www.graphdracula.net/js/raphael-min.js"></script>
<script src="https://www.graphdracula.net/js/graffle.js"></script>
<script src="https://www.graphdracula.net/js/graph.js"></script>
<div id="canvas">
</div>
<div>
  <input type="button" onclick="addItem()" value="Добавить в конец"/>
    <input type="button" onclick="removeItem()" value="Убрать с конца"/>
</div>

<a href='javascript:myFunction()'> Click Me! <a/>

CSS

body {
  padding: 10px;
  background-color: #eee;
}

#canvas {
  background-color: white;
  width: 400px;
  height: 400px;
}

JavaScript

var canvas = document.getElementById("canvas");
var c = {
  width: canvas.offsetWidth,
  height: canvas.offsetHeight,
  center: {
    x: canvas.offsetWidth / 2,
    y: canvas.offsetHeight / 2
  }
};


window.height = c.height;
window.width = c.width;


var g = new Graph();

g.addEdge("cherry", "apple");
//g.addEdge("strawberry", "kiwi");
g.addEdge("banana", "banana2");

/* layout the graph using the Spring layout implementation */
var layouter = new Graph.Layout.Spring(g);
layouter.layout();

/* draw the graph using the RaphaelJS draw implementation */
var renderer = new Graph.Renderer.Raphael('canvas', g, width, height);
renderer.draw();




function myFunction() {
g.addNode("strawberry");

}