dagreD3.js: 一个基于D3的专注于有向图布局(流程图)javascript库。
dagreD3.js: 一个基于D3的专注于有向图布局(流程图)javascript库。
参考原文链接:dagre/dagre-d3绘制流程图
参考原文链接:dagre/dagre-d3绘制流程图
参考原文链接:dagre/dagre-d3绘制流程图
一开始是用的echarts的关系图,type:‘graph’,但是关系图里面的series.data
很不好处理,他需要每个点的X,Y坐标.后来又换成了关系图和线图type:'line’的结合体,但是依然是老问题,data里面需要横纵坐标,line里面需要source和target,谁指向谁.
然后直接百度qcc的股权穿刺图,发现基本上都是用到d3写的,但是d3框架有点大,学起来,阅读代码起来都是1000行起步,难的去看.后来找到这个基于d3的dagreD3.js,发现写起来就比较方便了,废话不多说,直接撸代码.
npm i dagre-d3
npm i d3@5.16.0 //我这里安装的v5版本,d3现在最新的版本应该到v7了,一开始安装的是v7,但是v7有些东西没有,例如下面代码的event
// 引入
import dagreD3 from "dagre-d3";
import * as d3 from "d3";
// vue 里面的data数据
data () {
return {
list: {
nodeInfos: [ // 节点数组
],
edges: [ //节点之间关系数组
]
},
tooltip: this.createTooltip(), //创建tooptip窗体 ,即鼠标移入有窗体显示
gGraph: new dagreD3.graphlib.Graph().setGraph({ // 初始画布板式
rankdir:'TB', //设置 node 节点的延伸排列方向,它有4个值: TB, BT, LR, 或者 RL 可选,默认是’TB’(从上到下)。
align:'DL',
nodesep: 100,
edgesep:100,
ranksep: 50,
marginx:50,
marginy:100
})
};
},
created () {
this.list.nodeInfos = [
{ id: 0, label: "TAOBAO HOLDING LIMITED", shape: "rect", },
{ id: 1, label: "淘宝中国控股有限公司", shape: "rect" },
{ id: 2, label: "淘宝(中国)软件有限公司", shape: "rect" },
{ id: 3, label: "浙江天猫技术有限公司", shape: "rect" },
{ id: 4,
label: "阿里巴巴(中国)网络技术有限公司",
shape: "rect",
nodeStyle:'fill:#128aeb;stroke:#9fbed2',
labelStyle:"fill:#fff"
},
],
this.list.edges = [
{ source: 0, target: 1, label: "100%" },
{ source: 2, target: 1, label: "100%" },
{ source: 1, target: 3, label: "57.945%",
edgeStyle:"fill:#fff;stroke:#fc485e;stroke-width:1.5px",
arrowheadStyle:'fill:#fc485e',
labelStyle:'fill:#fc485e'
},
]
},
/**
node 配置
labelType节点标签格式,可以设置文本以及html格式
label 节点标签,即节点上要显示的文本,设置html格式时,label为html标签
shape 节点形状,可以设置rect,circle,ellipse,diamond 四种形状,还可以使用render.shapes()自定义形状
style 节点样式, 可设置节点的颜色填充、节点边框,如style: “fill:#fff;stroke:#faf”
labelStyle 节点标签样式, 可设置节点标签的文本样式(颜色、粗细、大小),如style: “fill:#afa;font-weight:bold”
width 即节点宽度
height 即节点高度
edge 配置
abelType边标签格式,可以设置文本以及 html 格式,默认为文本格式。
label 边标签,即节点上要显示的文本,设置 html 格式时,label为 html 标签。
style 边样式, 可设置边的颜色填充、边框,如style: “fill:#fff;stroke:#faf”
labelStyle 边标签样式, 可设置边标签的文本样式(颜色、粗细、大小),如labelStyle: “fill:#afa;font-weight:bold”
arrowhead 箭头形状,可以设置 normal,vee,undirected 三种样式,默认为 normal。
arrowheadStyle 箭头样式,可以设置箭头颜色等,如 arrowheadStyle:“fill:#f66”
**/
mounted () {
this.setNodeFun()
this.setEdgeFun()
this.renderFun()
}
methods:{
// 生成节点
setNodeFun () {
this.list.nodeInfos && this.list.nodeInfos.forEach((item) => {
this.gGraph.setNode(item.id, {
//节点标签
label: item.label,
labelStyle:item.labelStyle || 'fill:#000',
//节点形状
shape: item.shape,
//节点样式
style: item.nodeStyle || "fill:#fff;stroke:#9fbed2"
})
})
},
// 生成链接线
setEdgeFun () {
this.list.edges.forEach(item => {
this.gGraph.setEdge(item.source, item.target, {
//边标签
label: item.label,
labelStyle :item.labelStyle || "fill:#84b8e0",
//边样式
style: item.edgeStyle || "fill:#fff;stroke:#e1e1e1;stroke-width:1.5px",
arrowheadStyle :item.arrowheadStyle || 'fill:#2385d2'
})
});
},
//绘制图形
renderFun () {
const that = this
const svgAb = d3.select("svg"),
innerAb = svgAb.select("g");
//缩放
// const zoom = d3.zoom().on("zoom", function () {
// inner.attr("transform", d3.event.transform);
// });
// svg.call(zoom);
const render = new dagreD3.render();
render(innerAb, this.gGraph);
innerAb.selectAll("g.node")
.on("mouseover", function (v) {
that.tipVisible(that.gGraph.node(v).label);
})
.on("mouseout", function () {
that.tipHidden();
})
},
//创建提示框
createTooltip() {
return d3.select('body')
.append('div')
.classed('tooltip', true)
.style('opacity', 0)
.style('display', 'none');
},
//tooltip显示
tipVisible(textContent) {
this.tooltip.transition()
.duration(400)
.style('opacity', 0.9)
.style('display', 'block');
this.tooltip.html(textContent)
.style('left', (d3.event.pageX + 15) + 'px')
.style('top', (d3.event.pageY + 15) + 'px');
},
//tooltip隐藏
tipHidden() {
this.tooltip.transition()
.duration(400)
.style('opacity', 0)
.style('display', 'none');
},
}
<template>
<div class="flow-chart">
<svg
width="2400"
height="1600"
>
<g />
</svg>
</div>
</template>