在vue项⽬中使⽤dagre-d3流程图
近期项⽬中使⽤到d3插件绘制的流程图。
⾸先认识下dagre。dagre是专注于有向图布局的javascript库，由于dagre 仅仅专注于图形布局，需要使⽤其他⽅案根据 dagre 的布局信息来实际渲染图形，⽽ dagre-d3 就是 dagre 基于 D3 的渲染⽅案。
使⽤步骤
1、下载d3及dagreD3
import dagreD3 from"dagre-d3";
import*as d3 from"d3";
2、数据准备
流程图作为⼀种有向图，与树图、⽹络图⼀样，数据由节点以及两点之间的边组成。
dataSet:{
nodes:[
{
id:0,
label:"申请⼈",
shape:"rect",
color:"fill:#d81b13;stroke:transparent",
toolText:""
},
{
id:1,
label:"⽀撑需求填写\n销售",
shape:"rect",
color:"",
toolText:""
},
{
id:2,
label:"⽀撑⽅案填写\n⼀级⽀撑经理",
shape:"rect",
color:"",
toolText:""
},
{
id:3,
label:"评审意见填写\n客响",
shape:"rect",
color:"",
toolText:""
},
{
id:4,
label:"⽀撑⽅案和评审填写\n⼀级⽀撑经理",            shape:"rect",
color:"",
toolText:""
},
{
id:5,
label:" 已结束 ",
shape:"rect",
color:"",
toolText:""
}
],
edges:[
{id:1, source:0, target:1, label:"", color:""},
{id:2, source:1, target:2, label:"", color:""},
{id:3, source:2, target:3, label:"", color:""},
{id:4, source:3, target:4, label:"", color:""},
{id:5, source:4, target:5, label:"", color:""},
{id:6, source:2, target:5, label:"", color:""}
]
},
3、绘制流程图
// 设置节点和连线
renderGagre(){
/
/ 创建graph对象
const g =aphlib.Graph();
// 设置图
g.setGraph({
rankdir:"LR",// T:top B:bottom
rankdir:"LR",// T:top B:bottom
marginx:60,
marginy:80,
edgesep:100,
ranksep:60
});
des.forEach((item)=>{
g.setNode(item.id,{
// 节点标签
label: item.label,
// 节点形状
shape: item.shape,
toolText: lText,
// 节点样式
style: lor ? lor :"fill:#c0c1c3;stroke:transparent",// 根据后台数据来改变节点颜⾊          labelStyle:"fill:#fff;",
width:83,
height:40
});
});
this.dataSet.edges.forEach((item)=>{
g.setEdge(item.source, item.target,{
// 边标签
label: item.label,
arrowheadStyle: lor ? lor :"fill:#c0c1c3;",// 根据后台数据来改变连线箭头的颜⾊// 边样式
style: lor
? lor
:"fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px"// 根据后台数据来改变连线的颜⾊
});
});
// 创建渲染器
const render =der();
// 选择svg并添加⼀个g元素作为绘图容器
const svgGroup = d3.select('svg').append("g");
// 建⽴拖拽缩放
const svg = d3.select("svg");
const zoom = d3.zoom().on("zoom",function(){
svgGroup.attr("transform", ansform);
});
svg.call(zoom);
/
/ 在绘图容器上运⾏渲染器⽣成流程图
render(svgGroup, g);
// ⿏标悬停显⽰隐藏tooptip
svgGroup
.selectAll("g.node")
.on("mouseover",(v)=>{
// 假如当前toolText为""，则不展⽰
de(v).toolText ===""){
return;
}
this.de(v).toolText);
})
.on("mouseout",()=>{
svg图this.tipHidden();
});
},
哦，对了要想实现上⾯的⿏标悬停的tooltip，还需要下⾯的js和css
js代码
// 创建提⽰框
createTooltip(){
return d3
.select("body")
.
append("div")
.classed("tooltip",true)
.style("opacity",0)
.style("display","none");
},
// tooltip显⽰
tipVisible(textContent){
.transition()
.duration(400)
.style("opacity",0.9)
.
style("display","block");
.html(textContent)
.style("left",`${d3.event.pageX +15}px`)
.style("top",`${d3.event.pageY +15}px`);
},
// tooltip隐藏
tipHidden(){
.transition()
.duration(400)
.
style("opacity",0)
.style("display","none");
}
css 代码
.tooltip {
position: absolute;
font-size: 12px;
text-align: center;
background-color: white;
border-radius: 3px;
box-shadow: rgb(174, 174, 174) 0px 0px 10px;
cursor: pointer;
display: inline-block;
padding:10px;
}
.tooltip>div {
padding: 10px;
}
以上就能实现⼀个结合后台数据动态渲染的流程图，在绘制流程图的时候，也遇到⼀些问题：
1、要根据不同的状态，展⽰不同颜⾊的节点、连线。
解决：本来绘制流程图在mouted函数中绘制就可出现，但是现在要实时根据数据来改变，所以要先获取到后台数据，然后再渲染流程图，⽽且获取后台数据要在mouted中就要获取到(之前在mouted绘制流程要去除，不然后续页⾯会出现两个流程图)，不然⼀开始加载就来不显⽰。
2、tooltip 显⽰不出来
这个问题真的了很久，⼀开始以为这个tooltip没有没有在页⾯上加载出来，但是当触发这个事件的时候，页⾯上的滚动条是有变化的，所以tooltip是已经绘制出来的，但是不知为何显⽰不出来。后来才到原因，是因为我在流程图这个组件的样式标签上加上了scoped，从⽽影响了样式。
3、在iview 模态框组件中使⽤组件，节点连线渲染出错
这个问题解决可以看我这条博客
总结
以上就是我在项⽬中的例⼦，有关⼀些配置及相关的解释，⼤家可以参考这篇⽂章

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