dagre-d3画流程图

最新推荐文章于 2024-05-22 10:06:33 发布

Andrewniu

最新推荐文章于 2024-05-22 10:06:33 发布

阅读量1.3k

点赞数

分类专栏： C#基础类

C#基础类专栏收录该内容

233 篇文章 14 订阅

订阅专栏

dagre-d3画流程图，效果：

<!doctype html>

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>

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;

}

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>
---------------------
作者：ym563099457
来源：CSDN
原文：https://blog.csdn.net/ym563099457/article/details/85102115
版权声明：本文为博主原创文章，转载请附上博文链接！