dagre-d3实现流程图并可拖拽_dagre-d3官网

• 官方文档：d3：https://d3js.org/

• 工作需求：实现一个可拖拽的工作流画布，类型elsa-core

• elsa-core：https://github.com/elsa-workflows/elsa-core

• 简单说明：
  -Dagre是一个能够在客户端轻松创建流程图的JavaScript类库，而dagre-d3可以理解为是Dagre的前端，它使用D3来进行渲染。

• 安装

• npm install dagre-d3

• npm install d3

• 使用

import * as d3 from 'd3'
import dagreD3 from 'dagre-d3'

class Designers extends React.Component {
  constructor(props) {
    super(props)

    this.state = {}

    this.dagreD3Renderer = new dagreD3.render()
    this.graph = new dagreD3.graphlib.Graph().setGraph({})

  componentDidMount() {
  this.init(数据)
  }
  //初始化
  init=()={}

  render() {
    return (
      <div className="workflow-canvas">
        <svg
          ref={this.svg}
          id="svg"
          style={{
            height: 'calc(100vh - 106px)',
            width: '100%'
          }}
        >
          <g ref={this.inner}></g>
        </svg>
      </div>
    )
  }
}

export default Designers


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

• api
  官方api都有介绍，链接https://d3js.org/