由于工作中用到了此插件制作简易流程图,以前没用过,特此记录
效果图:
下载
npm install d3
npm install dagre-d3
html
<svg width="400" height="253">
<g />
<rect />
</svg>
1.声明数组state(点)和edg(边)
图形中最重要的就是节点和连线(节点之间的联系)
list: {
//节点
nodeInfos: [
{
id: "node1",
label: "节点1",
},
{
id: "node2",
label: "节点2",
},
{
id: "node3",
label: "节点3",
},
{
id: "node4",
label: "节点4",
},
],
//节点之间的连线
edges: [
{
source: "node1",
target: "node2",
},
{
source: "node2",
target: "node3",
},
{
source: "node2",
target: "node4",
},
]
}
节点可以包含很多信息,比如节点的形状、大小、背景颜色。接下来就是绘制流程图了,首先呢需要先获取实例对象并且做一些简单的配置。
2.创建对象graph。
var g = new dagreD3.graphlib.Graph().setGraph({}).setDefaultEdgeLabel(function() { return {}; });
3.声明并添加节点和连线。
//添加节点
this.list.nodeInfos.forEach((item, index) => {
g.setNode(item.id, {
id: item.id,
label: item.label,
class: 'type-1'
});
});
//添加连线
this.list.edges.forEach(item => {
g.setEdge(item.source, item.target, {
style: "stroke: #0fb2cc; fill: none;",
arrowheadStyle: "fill: #0fb2cc;stroke: #0fb2cc;",
arrowhead: 'vee'
});
});
4.渲染图形
var render = new dagreD3.render();
var svg = d3.select("svg"); //声明节点
svg.select("g").remove(); //删除以前的节点,清空画面
var svgGroup = svg.append("g");
var inner = svg.select("g");
var zoom = d3.zoom().on("zoom", function () { //添加鼠标滚轮放大缩小事件
inner.attr("transform", d3.event.transform);
});
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 - this.g.graph().width * initialScale) / 2; //水平居中
var tHeight = (svg._groups[0][0].clientHeight - this.g.graph().height * initialScale) / 2; //垂直居中
svg.call(zoom.transform, d3.zoomIdentity.translate(tWidth, tHeight).scale(initialScale)); //元素水平垂直居中
5.事件
基本图形渲染完成之后,我们还可以给节点添加一些事件,例如点击事件,如下:
let code;
inner.selectAll("g.node").on("click", e => {
//点击事件
code = this.list.nodeInfos.filter(item => {
return item.id == e;
});
console.log(code);
});
像这样,一个简单的流程图组件就完成了。
当然dagre-d3.js还有其他的功能,更多详情请参考如下地址。
官方demo地址:https://github.com/dagrejs/dagre-d3.git