Skip to content

Commit 4fab11e

Browse files
author
liyonglu
committed
dagre-d3的流程图demo
dagre-d3的流程图demo
1 parent 0940fd0 commit 4fab11e

File tree

2 files changed

+237
-0
lines changed

2 files changed

+237
-0
lines changed

‎js流程图制作/demo/index.html‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>流程图的简单实现</title>
9+
<script src="https://cdn.bootcss.com/d3/5.11.0/d3.js"></script>
10+
<script src="https://cdn.bootcss.com/dagre-d3/0.6.3/dagre-d3.js"></script>
11+
</head>
12+
13+
<body>
14+
<div class="container">
15+
<svg id="svg-canvas" width=2000 height=900>
16+
<g />
17+
</svg>
18+
</div>
19+
<script>
20+
// 1. 初始画节点
21+
var state = [
22+
{ label: 'project_etl_start\n虚节点', class: 'type-suss' },
23+
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
24+
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
25+
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
26+
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
27+
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
28+
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
29+
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
30+
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
31+
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
32+
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
33+
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
34+
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
35+
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
36+
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' }
37+
]
38+
var edg = [
39+
{ start: 1, end: 4, option: {} },
40+
{ start: 1, end: 3, option: {} },
41+
{ start: 1, end: 2, option: {} },
42+
{ start: 6, end: 7, option: {} },
43+
{ start: 5, end: 6, option: {} },
44+
{ start: 9, end: 10, option: {} },
45+
{ start: 8, end: 9, option: {} },
46+
{ start: 11, end: 12, option: {} },
47+
{ start: 8, end: 11, option: {} },
48+
{ start: 5, end: 8, option: {} },
49+
{ start: 1, end: 5, option: {} },
50+
{ start: 13, end: 14, option: {} },
51+
{ start: 1, end: 13, option: {} },
52+
{ start: 0, end: 1, option: {} }
53+
]
54+
// 2. 创建对象graph。
55+
var g = new dagreD3.graphlib.Graph()
56+
.setGraph({})
57+
.setDefaultEdgeLabel(function () { return {}; });
58+
// 3. 声明并添加树节点和边。
59+
60+
var drawNode = function () {
61+
for (let i in state) { //画点
62+
let el = state[i]
63+
g.setNode(i, {
64+
id: i,
65+
label: el.label,
66+
class: el.class,
67+
style: "stroke: #000000; fill: #ffffff;",
68+
});
69+
}
70+
}
71+
var drawEdg = function () {
72+
for (let i in edg) { // 画连线
73+
let el = edg[i]
74+
g.setEdge(el.start, el.end, {
75+
style: "stroke: #0fb2cc; fill: none;",
76+
arrowheadStyle: "fill: #0fb2cc;stroke: #0fb2cc;",
77+
arrowhead: 'vee'
78+
});
79+
}
80+
}
81+
82+
// 4. 渲染dag图。
83+
84+
var render = new dagreD3.render();
85+
var svg = d3.select("#svgCanvas"); //声明节点
86+
svg.select("g").remove(); //删除以前的节点，清空画面
87+
var svgGroup = svg.append("g");
88+
var inner = svg.select("g");
89+
var zoom = d3.zoom().on("zoom", function () { //添加鼠标滚轮放大缩小事件
90+
inner.attr("transform", d3.event.transform);
91+
});
92+
svg.call(zoom);
93+
this.drawNode(); //画点
94+
this.drawEdg(); // 画连线
95+
render(d3.select("svg g"), this.g); //渲染节点
96+
let max = svg._groups[0][0].clientWidth > svg._groups[0][0].clientHeight ? svg._groups[0][0].clientWidth : svg._groups[0][0].clientHeight;
97+
var initialScale = max / 779; //initialScale元素放大倍数，随着父元素宽高发生变化时改变初始渲染大小
98+
var tWidth = (svg._groups[0][0].clientWidth - this.g.graph().width * initialScale) / 2; //水平居中
99+
var tHeight = (svg._groups[0][0].clientHeight - this.g.graph().height * initialScale) / 2; //垂直居中
100+
svg.call(zoom.transform, d3.zoomIdentity.translate(tWidth, tHeight).scale(initialScale)); //元素水平垂直居中
101+
// 5. 添加鼠标右键事件， 样式如图：
102+
103+
//主要代码如下：
104+
var svgCanvas = document.getElementById('svg-canvas'); //svg
105+
var myMenu = document.getElementById("myMenu"); //右键菜单
106+
107+
svgCanvas.addEventListener('mouseover', function (e) { //监听鼠标右键
108+
e.preventDefault();
109+
if (e.target.tagName === 'rect') {
110+
myMenu.style.top = event.clientY + "px"; //获取鼠标位置
111+
myMenu.style.left = event.clientX + "px";
112+
myMenu.style.display = 'block'; //显示相应右键内容
113+
}
114+
})
115+
document.addEventListener("click", (event) => {
116+
myMenu.style.display = 'none';
117+
});
118+
</script>
119+
</body>
120+
121+
</html>

‎js流程图制作/demo/index1.html‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Document</title>
9+
<script src="https://cdn.bootcss.com/d3/5.11.0/d3.js"></script>
10+
<script src="https://cdn.bootcss.com/dagre-d3/0.6.3/dagre-d3.js"></script>
11+
</head>
12+
13+
<body>
14+
<div class="container">
15+
<div class="col-sm-6">
16+
<svg width=960 height=400>
17+
<g />
18+
</svg>
19+
</div>
20+
</div>
21+
<script>
22+
let svg = d3.select("svg"),
23+
inner = svg.select("g");
24+
25+
// Create the input graph
26+
this.g = new dagreD3.graphlib.Graph({});
27+
// Set an object for the graph label
28+
this.g.setGraph({});
29+
// Default to assigning a new object as a label for each new edge.
30+
this.g.setDefaultEdgeLabel(function () {
31+
return {};
32+
});
33+
this.g.graph().transition = function (selection) {
34+
return selection.transition().duration(500);
35+
};
36+
37+
// 缩放功能实现
38+
var zoom = d3.zoom().on("zoom", function () {
39+
inner.attr("transform", "translate(" + d3.event.translate + ")" +
40+
"scale(" + d3.event.scale + ")");
41+
});
42+
svg.call(zoom);
43+
44+
this.g.setNode(0, { label: 'VVV' });
45+
this.g.setNode(1, { label: "A" });
46+
this.g.setNode(2, { label: "B" });
47+
this.g.setNode(3, { labelType: "html", label: "<i class=\"fa fa-database\"></i>B" });
48+
49+
this.g.setEdge(0, 1);
50+
this.g.setEdge(0, 2);
51+
this.g.setEdge(2, 3);
52+
53+
// Run the renderer. This is what draws the final graph.
54+
// this.render(inner, this.g);
55+
let render = new dagreD3.render();
56+
render(inner, this.g);
57+
58+
this.g.nodes().forEach((v) => {
59+
let node = this.g.node(v);
60+
console.log(`Node ${v}: Label:${node.label},X:${node.x},Y:${node.y}`);
61+
});
62+
63+
//give IDs to each of the nodes so that they can be accessed
64+
svg.selectAll("g.node rect")
65+
.attr("id", function (d) {
66+
return "node" + d;
67+
});
68+
svg.selectAll("g.edgePath path")
69+
.attr("id", function (e) {
70+
return e.v + "-" + e.w;
71+
});
72+
svg.selectAll("g.edgeLabel g")
73+
.attr("id", function (e) {
74+
return 'label_' + e.v + "-" + e.w;
75+
});
76+
77+
78+
this.g.nodes().forEach((v) => {
79+
var node = this.g.node(v);
80+
node.customId = "node" + v;
81+
});
82+
this.g.edges().forEach((e) => {
83+
var edge = this.g.edge(e.v, e.w);
84+
edge.customId = e.v + "-" + e.w
85+
});
86+
87+
// code for drag
88+
function dragstart(d) {
89+
d3.event.sourceEvent.stopPropagation();
90+
}
91+
92+
let dragmover = (currentThis, d) => {
93+
this.dragmove(currentThis, d);
94+
};
95+
96+
function dragmove(d) {
97+
dragmover(this, d)
98+
}
99+
100+
let nodeDrag = d3.drag()
101+
.on("dragstart", dragstart)
102+
.on("drag", dragmove);
103+
104+
let edgeDrag = d3.drag()
105+
.on("dragstart", dragstart)
106+
.on('drag', (d) => {
107+
this.translateEdge(this.g.edge(d.v, d.w), d3.event.dx, d3.event.dy);
108+
$('#' + this.g.edge(d.v, d.w).customId).attr('d', this.calcPoints(d));
109+
});
110+
111+
nodeDrag.call(svg.selectAll("g.node"));
112+
edgeDrag.call(svg.selectAll("g.edgePath"));
113+
</script>
114+
</body>
115+
116+
</html>

0 commit comments

Comments
 (0)