使⽤dagre-d3制作流程图csdn引⼊:
<script src="/d3.v4.min.js" charset="utf-8"></script>
<script src="../dist/dagre-d3.js"></script>
index.html
<svg id="svg-canvas" width=960 height=900></svg>
index.js
1.声明数组state（点）和edg（边）
var state = [
{ label: 'project_etl_start\n虚节点', class: 'type-suss' },
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' },
{ label: 'project_etl_start\n虚节点', class: 'type-TOP' }
]
var edg = [
{ start: 1, end: 4, option: {} },
{ start: 1, end: 3, option: {} },
{ start: 1, end: 2, option: {} },
{ start: 6, end: 7, option: {} },
{ start: 5, end: 6, option: {} },
{ start: 9, end: 10, option: {} },
{ start: 8, end: 9, option: {} },
{ start: 11, end: 12, option: {} },
{ start: 8, end: 11, option: {} },
{ start: 5, end: 8, option: {} },
{ start: 1, end: 5, option: {} },
{ start: 13, end: 14, option: {} },
{ start: 1, end: 13, option: {} },
{ start: 0, end: 1, option: {} }
]
2.创建对象graph。
var g = aphlib.Graph()
.setGraph({})
.setDefaultEdgeLabel(function () { return {}; });
3.声明并添加树节点和边。
for (let i in state) { //画点
let el = state[i]
g.setNode(i, {
id: i,
label: el.label,
class: el.class
});
}
for (let i in edg) { // 画连线
let el = edg[i]
g.setEdge(el.start, el.end, {
style: "stroke: #0fb2cc; fill: none;",
arrowheadStyle: "fill: #0fb2cc;stroke: #0fb2cc;",
arrowhead: 'vee'
});
}
4.渲染dag图。
var render = der();
var svg = d3.select("#svgCanvas"); //声明节点
svg.select("g").remove(); //删除以前的节点，清空画⾯
var svgGroup = svg.append("g");
var inner = svg.select("g");
var zoom = d3.zoom().on("zoom", function () { //添加⿏标滚轮放⼤缩⼩事件
inner.attr("transform", ansform);
});
svg.call(zoom);
this.drawNode();//画点
this.drawEdg();// 画连线
render(d3.select("svg g"), this.g); //渲染节点
let max = svg._groups[0][0].clientWidth>svg._groups[0][0].clientHeight?svg._groups[0][0].clientWidth:svg._groups[0] [0].clientHeight;
var initialScale = max/779; //initialScale元素放⼤倍数，随着⽗元素宽⾼发⽣变化时改变初始渲染⼤⼩
var tWidth = (svg._groups[0][0].clientWidth  - aph().width * initialScale) / 2; //⽔平居中
var tHeight = (svg._groups[0][0].clientHeight  - aph().height * initialScale) / 2; //垂直居中
svg.ansform, anslate(tWidth, tHeight).scale(initialScale)); //元素⽔平垂直居中
5.添加⿏标右键事件，样式如图：
//主要代码如下：
var svgCanvas = ElementById('svg-canvas'); //svg
var myMenu = ElementById("myMenu"); //右键菜单
svgCanvas.addEventListener('mouseover', function (e) {//监听⿏标右键
e.preventDefault();
if (e.target.tagName === 'rect') {
p = event.clientY + "px"; //获取⿏标位置
svg canvasmyMenu.style.left = event.clientX + "px";
myMenu.style.display = 'block';      //显⽰相应右键内容
}
})
document.addEventListener("click", (event) => {
myMenu.style.display = 'none';
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。