有向图

写在前面

最近的项目有一个需求，是关于有向图的, 第一个对应的功能主要是数据渲染，第二个则是添加了节点自定义的功能；
经过领导指导以及调查资料，发现有一个专门的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);
}
}
###基本概念及基本配置
![](https://img.haomeiwen.com/i28984750/ceb1dbd5b0b21ec0.jpg)