写在前面
最近的项目有一个需求，是关于有向图的, 第一个对应的功能主要是数据渲染，第二个则是添加了节点自定义的功能；
经过领导指导以及调查资料，发现有一个专门的js库--dagre
dagre 是专注于有向图布局的 javascript 库，由于 dagre 仅仅专注于图形布局，需要使用其他方案根据 dagre 的布局信息来实际渲染图形，而 dagre-d3 就是 dagre 基于 D3 的渲染方案
有向图的绘制
写一个小demo，效果图如下：
引入d3 以及 dagre-d3
1.准备数据nodes(节点)和edges(边)
nodes = {
0: {
label: 'ReactComponent',
style: 'fill: rgb(80, 194, 138);'
},
1: {
label: 'props',
style: 'fill: rgb(204, 230, 255);'
},
2: {
label: 'context',
style: 'fill: rgb(204, 230, 255);'
},
3: {
label: 'end',
style: 'fill: rgb(204, 230, 255);'
},
4: {
label: 'end',
style: 'fill: rgb(204, 230, 255);'
},
2235: {
label: "<button>Button</button>",
labelType: "html",
style: 'fill: rgb(204, 230, 255);'
}
}
edges: [
[0, 1, {
style: 'stroke: rgb(214, 214, 214); fill: none',
curve: d3.curveBasis
}],
[0, 2, {
style: 'stroke: rgb(214, 214, 214); fill: none',
curve: d3.curveBasis
}],
[0, 3, {
style: 'stroke: rgb(214, 214, 214); fill: none',
curve: d3.curveBasis
}],
[1, 4, {
style: 'stroke: rgb(214, 214, 214); fill: none',
curve: d3.curveBasis
}],
[2, 4, {
style: 'stroke: rgb(214, 214, 214); fill: none',
curve: d3.curveBasis
}]
]
<template>
<svg class='dagre-svg'>
<g/>
</svg>
</template>
data() {
return {
//创建Graph对象
g: new dagreD3.graphlib.Graph().setGraph({
rankdir: 'LR',
marginx: 20,
marginy: 20
})
}
}
mounted() {
this.svg = d3.select('svg');
this.inner = d3.select('g');
this.renderDag(this.nodes, this.edges);
}
methods: {
renderDag(nodes, edges) {
for (let [id, node] of Object.entries(nodes))
this.g.setNode(id, node);
for (let edge of edges) {
this.g.setEdge(edge[0], edge[1], edge[2]);
}
}
}
data() {
return {
renderGraph: new dagreD3.render()
}
}
methods: {
renderDag(nodes, edges) {
//选择绘图容器
let inner = this.inner;
...添加节点和边
//在绘图容器上运行渲染器生成流程图
this.renderGraph(inner, this.g);
}
}
methods: {
renderDag(nodes, edges) {
let svg = this.svg;
let zoom = d3.zoom().on("zoom",
() => inner.attr("transform", d3.event.transform));
svg.call(zoom);
}
}
2.使用 dagre-d3 创建 Graph 对象，并添加节点和边
<template>
<svg class='dagre-svg'>
<g/>
</svg>
</template>
data() {
return {
//创建Graph对象
g: new dagreD3.graphlib.Graph().setGraph({
rankdir: 'LR',
marginx: 20,
marginy: 20
})
}
}
mounted() {
this.svg = d3.select('svg');
this.inner = d3.select('g');
this.renderDag(this.nodes, this.edges);
}
methods: {
renderDag(nodes, edges) {
for (let [id, node] of Object.entries(nodes))
this.g.setNode(id, node);
for (let edge of edges) {
this.g.setEdge(edge[0], edge[1], edge[2]);
}
}
}
3.创建渲染器
data() {
return {
renderGraph: new dagreD3.render()
}
}
methods: {
renderDag(nodes, edges) {
//选择绘图容器
let inner = this.inner;
...添加节点和边
//在绘图容器上运行渲染器生成流程图
this.renderGraph(inner, this.g);
}
}
4.交互
methods: {
renderDag(nodes, edges) {
let svg = this.svg;
let zoom = d3.zoom().on("zoom",
() => inner.attr("transform", d3.event.transform));
svg.call(zoom);
}
}
###基本概念及基本配置
