工作上需要用javascript來畫拓樸圖，經過一番study，有不少工具都不錯用
sigma.js
http://sigmajs.org/
d3.js
https://github.com/mbostock/d3/wiki
some diagram can't display in IE, or even other browsers
infovis
http://philogb.github.com/jit/
http://www.codeproject.com/Articles/16192/Graphic-JavaScript-Tree-with-Layout
Joint
http://www.jointjs.com/demos.html
good, with edge end label, but can't place node automatically
js-graph.it
http://js-graph-it.sourceforge.net/
big problem: can not generate graph dynamically
good, with edge end label, but can't place node automatically
Dracula Graph Library
http://www.graphdracula.net/tag/javascript/
後來經過評比，覺得Dracula Graph Library最適合我的需求，於是選擇了它
不過這library有兩個地方是不合我的需要，於是就做了些study並修改了
1. 我需要直線的連接線，但它所提供的是弧線。這一點好解決，google一下就有解答了。在dracula_graffie.js中有一行:
var path = ["M", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");
把"C" (curve)改成"L" (line)就行了
2. 我需要在線段的兩端都有label。這一點google了老半天都沒有解，後來就花功夫去k程式，經過一番試驗也解決了。一樣在dracula_graffie.js中的Raphael.fn.connection裡的draw function (約在26行)，在最後面加上:
/* add source/target label on both edge end */
var x1l = x1+0.05*(x4-x1), y1l = y1+0.05*(y4-y1);
var x4l = x4+0.05*(x1-x4), y4l = y4+0.05*(y1-y4);
style && style.src_label
&& (edge.src_label && edge.src_label.attr({x:x1l, y:y1l})
|| (edge.src_label = selfRef.text(x1l,y1l,style.src_label).attr({fill: "#000", "font-size": style["font-size"] || "12px"})));
style && style.trg_label
&& (edge.trg_label && edge.trg_label.attr({x:x4l, y:y4l})
|| (edge.trg_label = selfRef.text(x4l,y4l,style.trg_label).attr({fill: "#000", "font-size": style["font-size"] || "12px"})));
這樣在畫線時加上
g.addEdge(src,dst,{src_label:'end_1', trg_label:'end_2'});
就可以有端點的label了
