使用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>