插件地址: dagre-d3
引用的资源:
d3.v3.min.js http://d3js.org/d3.v3.min.js
dagre-d3.min.js http://cpettitt.github.io/project/dagre-d3/v0.3.0/dagre-d3.min.js
效果一
html文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/stylesheets/style.css" />
<title>workflow-view</title>
<head>
<body>
<svg width=960 height=600><g/></svg>
<body>
<script src="/javascripts/plu/jquery.min.js"></script>
<script src="/javascripts/plu/d3.v3.min.js"></script>
<script src="/javascripts/plu/dagre-d3.min.js"></script>
<script src="/javascripts/workflow.js"></script>
<html>
workflow.js
// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({});
// States and transitions from RFC 793
var states = [ "CLOSED", "LISTEN", "SYN RCVD", "SYN SENT",
"ESTAB", "FINWAIT-1", "CLOSE WAIT", "FINWAIT-2",
"CLOSING", "LAST-ACK", "TIME WAIT" ];
// Automatically label each of the nodes
states.forEach(