使用joint.js 绘制图

试了几种在js画graph的库，还是joint.js合适一些，对于简单的图显示很适用。具体链接：

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>