拓扑流动图主要处理流程化的前端业务操作。可以拖动，编辑、删除组件和连线。

前端框架 vue + D3 + svg

主要处理流程化的前端业务操作。

可以拖动，编辑、删除组件和连线。

  _createCircleElement () {
    let pa = document.getElementById(this.id + 'path')
    let len = pa.getTotalLength()
    let startLen = 4
    let step = 1
    let poi = pa.getPointAtLength(0)
    const { x, y } = poi
    this.circle = this.container
      .append('circle')
      .attr('cx', x)
      .attr('cy', y)
      .attr('r', 5)
      .attr('fill', 'rgba(64, 158, 255)')
    let _circle = this.circle
    function render () {
      startLen += step
      if (startLen >= len) {
        startLen = 4
      }
      poi = pa.getPointAtLength(startLen)
      _circle.attr('cx', poi.x).attr('cy', poi.y)
      window.requestAnimationFrame(render)
    }
    //第一帧渲染
    window.requestAnimationFrame(render)
  }