Lab1

Я что-то понял

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" id="button" value="Add" />
<input type="button" id="button2" value="Remove" />

CSS

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

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

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();
//messageWrite();
var num = 0
$('#button').click(function() {
		
    
    name = "banana" + num
		num = num + 1
		newname = "banana" + num
    g.addEdge(name, newname);
		renderer.draw();
});
$('#button2').click(function() {
	
});