JavaScript

摘要:JavaScript - Relationship Graph


参考以下几只程序,并实践出,简易版建立方式

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);    
  }

结果,失败。

线条重复到,无法辨别沟通,作罢。