使用joint.js 绘制图
试了几种在js画graph的库，还是joint.js合适一些，对于简单的图显示很适用。具体链接：
http://jointjs.com/download ：
<link rel="stylesheet" href="joint.css" >
<script src="joint.js" ></script>
<script src="joint.layout.DirectedGraph.js"></script>
http://www.daviddurman.com/assets/autolayout.js：
<script src="autolayout.js" ></script>
2. 示例代码：
http://www.daviddurman.com/automatic-graph-layout-with-jointjs-and-dagre.html
demo：
1.script和css下载：
http://jointjs.com/download ：
<link rel="stylesheet" href="joint.css" >
<script src="joint.js" ></script>
<script src="joint.layout.DirectedGraph.js"></script>
http://www.daviddurman.com/assets/autolayout.js：
<script src="autolayout.js" ></script>
2. 示例代码：
<link rel="stylesheet" href="joint.css" >
<script src="joint.js" ></script>
<script src="joint.layout.DirectedGraph.js"></script>
<script src="autolayout.js" ></script>
<textarea id="adjacency-list" rows=40 cols=100>{
'a': ['b'],
'a': ['c'],
'b': ['f'],
'c': ['e', 'd'],
'd': [],
'e': [],
'f': ['g'],
'g': []
}</textarea>
<br>
<button id="btn-layout">Layout</button>
<div id="paper"></div>
<script>
// Main.
// -----
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 2000,
height: 2000,
gridSize: 1,
model: graph
});
// Just give the viewport a little padding.
V(paper.viewport).translate(20, 20);
$('#btn-layout').on('click', layout);
function layout() {
try {
var adjacencyList = eval('adjacencyList = ' + $('#adjacency-list').val());
} catch (e) { alert(e); }
var cells = buildGraphFromAdjacencyList(adjacencyList);
graph.resetCells(cells);
joint.layout.DirectedGraph.layout(graph, { setLinkVertices: false });
}
layout();
</script>