使用joint.js 绘制图

浏览数：115 / 时间：2015年06月09日

试了几种在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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

使用joint.js 绘制图