dagre-d3畫流程圖，效果：
<!doctype html>
<meta charset="utf-8">
<title>Process</title>
<script src="/d3.v4.min.js" charset="utf-8"></script>
<script src="/dagre-d3.min.js"></script>
<script src="/jquery.min.js"></script>
<script src="/server.js"></script>
<script src="/login.js"></script>
<style id="css">
g.type-current > rect {
fill: #1E9FFF;
}
g.type-success > rect {
fill: green;
}
g.type-fail > rect {
fill: red;
}
text {
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px;
}
.node rect {
stroke: #999;
fill: #fff;
stroke-width: 1.5px;
}
.edgePath path {
stroke: #333;
stroke-width: 1.5px;
}
</style>
<svg id="svg-canvas" width=700 height=300></svg>
<script >
var topicId = sessionStorage.getItem('dataFlowTopicId');
var v= [1,2,3];
var a = {'age':30,'sex':'male'};
function count(o){
var t = typeof o;
if(t == 'string'){
return o.length;
}else if(t == 'object'){
var n = 0;
for(var i in o){
n++;
}
return n;
}
return false;
}
var dataFlow = {
0: '事項受理',
1: '事項辦結',
2: '初審',
3: '複審',
4: '初審回覆',
5: '初審辦結完成',
6: '初審補正',
7: '複審回覆',
8: '複審辦結完成',
9: '複審補正',
10: '事項辦結',
};
// Create the input graph
var g = new dagreD3.graphlib.Graph()
.setGraph({})
.setDefaultEdgeLabel(function() { return {}; });
for (var i = 0; i < count(dataFlow); i++) {
g.setNode(i, {
label:dataFlow[i],
class: "type-no",
id: "status"+i
});
}
// g.setNode(20, {
// label: dataFlow[20],
// class:'type-no',
// id: 'status20'
// });
g.nodes().forEach(function(v) {
var node = g.node(v);
// Round the corners of the nodes
node.rx = node.ry = 5;
});
// Set up edges, no special attributes.
g.setEdge(0, 1,{label: "不予受理"});
g.setEdge(0, 2,{label: "予以受理"});
g.setEdge(2, 6,{label: "補正"});
g.setEdge(6, 2,{label: "補正完畢"});
g.setEdge(2, 4,{label: "不予受理"});
g.setEdge(4, 5,{label: "初審不通過"});
g.setEdge(2, 3,{label: "初審通過"});
g.setEdge(3, 9,{label: "補正"});
g.setEdge(3, 7,{label: "複審不通過"});
g.setEdge(7, 8,{label: "回覆完畢"});
g.setEdge(3, 10,{label: "審批通過"});
// Create the renderer
var render = new dagreD3.render();
// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("svg"),
svgGroup = svg.append("g");
// Run the renderer. This is what draws the final graph.
render(d3.select("svg g"), g);
var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)");
svg.attr("height", g.graph().height + 40);
</script>
<script>
</script>