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

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