小賴的實戰記錄

參考以下幾隻程式，並實作出，簡易版建立方式

http://www.graphdracula.net/

https://github.com/jesse-c/stemma/tree/master/components/dracula-master

修改github中下載的example，並將example.js改成如下。

javascript 如下

var redraw;

/* only do all this when document has finished loading (needed for RaphaelJS) */
window.onload = function() {

  var width = 600;
  var height = 400;

  var g = new Graph();
  
  var nodes =["node1","node2","node3"];
  
  var i;
  for(var key in nodes){ 
	g.addNode(nodes[key]);    
  }

  /* add a simple node */
  var edges = new Array();
  edges[0] = "node1,node2,follow";
  edges[1] = "node2,node3,follow";
  edges[2] = "node3,node1,follow";

  for(var key in edges){ 
    var values = edges[key].split(",");  
	var st = {directed: true};
	if(values[2]!=null)
	{
	   st["label"] = values[2];	   
	}
	g.addEdge(values[0], values[1], st);    
  }
  
  /*
  var st = {directed: true, label : "Label","label-style" : {"font-size": 12}};
  */
  /* layout the graph using the Spring layout implementation */
  var layouter = new Graph.Layout.Spring(g);

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

  redraw = function() {
    layouter.layout();
    renderer.draw();
  };
  hide = function(id) {
    g.nodes[id].hide();
  };
  show = function(id) {
    g.nodes[id].show();
  };

  redraw();
};

 

 

後來實驗證明，好像不用addNode，他也會產生Node

 

然後我異想天開的，改變了做法，改成如下

  var data = ["tom->jam:How Are You?","jam->tom:I'm fine Thank You","tom->jam:goodbye"];
  var edges = new Array();
  
  for(var key in data)
  {
    var thisData = data[key].replace("->",",");
	thisData = thisData.replace(":",",");
	edges[key] = thisData;
  }


  for(var key in edges){ 
    var values = edges[key].split(",");  
	var st = {directed: true};
	if(values[2]!=null)
	{
	   st["label"] = values[2];	   
	}
	g.addEdge(values[0], values[1], st);    
  }

結果，失敗。

線條重複到，無法辨別溝通，作罷。