A preliminary study on ant group G6

---

Preface

There are often scenes showing flow charts in work , Recently found ant group g6 It is good to show the visual interaction effect .

---

One 、 Installation dependency

 npm install --save @antv/g6

Two 、demo

<template>
  <div id="mountNode">

  </div>
</template>

<script>
import G6 from '@antv/g6'

export default {
    
  name: 'g6-demo',
  data () {
    
    return {
    
      data: {
    
        //  Point set 
        nodes: [
          {
    
            id: 'node1', // String, If the node exists, it must , Unique identification of the node 
            label: ' Submit for review ',
          },
          {
    
            id: 'node2',
            label: ' Flow side review \n One click to group ',
            labelCfg: {
    
              position: 'bottom',
              style: {
    
                fill: '#2D8cF0', //  Node label text color 
              },
            },
          },
          {
    
            id: 'node3',
            label: ' Service side review \n One click to group ',
          },
          {
    
            id: 'node4',
            label: ' Operation and maintenance side review \n One click to group ',
          },
          {
    
            id: 'node5',
            label: ' The review committee reviews \n One click to group ',
          },
          {
    
            id: 'node6',
            label: ' Final reviewer ',
          },
        ],
        //  Side set 
        edges: [
          {
    
            source: 'node1', // String, must , The starting point  id
            target: 'node2', // String, must , The target point  id
            style: {
    
              endArrow: true,
              lineWidth: 1,
              opacity: 0.6, //  Edge transparency 
              stroke: '#2D8cF0',
            },
          },
          {
    
            source: 'node1',
            target: 'node3',
          },
          {
    
            source: 'node1',
            target: 'node4',
          },
          {
    
            source: 'node2',
            target: 'node5',
            style: {
    
              endArrow: true,
              lineWidth: 1,
              opacity: 0.6, //  Edge transparency 
              stroke: '#2D8cF0',
            },
          },
          {
    
            source: 'node3',
            target: 'node5',
          },
          {
    
            source: 'node4',
            target: 'node5',
          },
          {
    
            source: 'node5',
            target: 'node6',
          },
        ],
      },
    }
  },
  methods: {
    
    g6Register () {
    
      G6.registerNode('custom-circle', {
    
        afterDraw (cfg, group) {
    
          group.addShape('circle', {
    
            attrs: {
    
              x: 0,
              y: 0,
              r: 5,
              fill: cfg.color || '#5B8FF9',
            },
            name: 'circle-shape',
          })
        },
        getAnchorPoints () {
    
          return [
            [ 0, 0.5, ], //  Left middle 
            [ 1, 0.5, ], //  Right middle 
          ]
        }, //  Determine where the node intersects the edge 
      }, 'circle') //  Inherit  'circle', See ：https://www.yuque.com/antv/g6/ckpk6v
      const lineDash = [ 4, 2, 1, 2, ]
      G6.registerEdge('can-running', {
    
        setState (name, value, item) {
    
          const shape = item.get('keyShape')
          if (name === 'running') {
    
            if (value) {
    
              let index = 0
              shape.animate(
                () => {
    
                  index++
                  if (index > 9) {
    
                    index = 0
                  }
                  // return the params for this frame
                  return {
    
                    lineDash,
                    lineDashOffset: -index,
                  }
                },
                {
    
                  repeat: true,
                  duration: 3000,
                },
              )
            } else {
    
              shape.stopAnimate()
              shape.attr('lineDash', null)
            }
          }
        },
      }, 'cubic-horizontal') //  Inherit  'cubic-horizontal', See ：https://www.yuque.com/antv/g6/internal-edge
    },
    newG6Graph () {
    
      const container = document.getElementById('mountNode')
      const graph = new G6.Graph({
    
        container: container, // String | HTMLElement, must , stay  Step 1  Container created in  id  Or the container itself 
        width: 1000, // Number, must , The width of the picture 
        height: 500, // Number, must , The height of the graph 
        fitCenter: true,
        layout: {
    
          type: 'dagre',
          rankdir: 'LR',
          nodesepFunc: (d) => {
    
            return 10
          }, //  The spacing between layers 
          ranksep: 60, //  Spacing between nodes 
          controlPoints: true,
        },
        //  The style configuration of the node in the default state （style） And other configurations 
        defaultNode: {
    
          type: 'custom-circle',
          //  Node style configuration 
          style: {
    
            // fill: '#5B8FF9', //  Node fill color 
            // stroke: '#666', //  Node stroke color 
            // lineWidth: 1, //  Node stroke thickness 
            cursor: 'pointer',
          },
          //  Label text configuration on node 
          labelCfg: {
    
            //  Label text style configuration on node 
            position: 'bottom',
            style: {
    
              // fill: '#fff', //  Node label text color 
            },
          },
        },
        defaultEdge: {
    
          type: 'can-running',
          style: {
    
            // endArrow: true, //  Arrow at the end 
            lineWidth: 1, //  Line width 
            opacity: 0.6, //  Edge transparency 
            stroke: '#C2C8D5', //  Color while tracing 
          },
        },
        nodeStateStyles: {
    
          selected: {
    
            stroke: '#d9d9d9',
            fill: '#5B8FF9',
          },
        },
        modes: {
    
          default: [ 'click-select', ],
        },
      })
      graph.data(this.data) //  Read  Step 2  Data sources in the graph 
      graph.render() //  rendering 
      //  Bind all nodes on the graph and click listen 
      graph.on('node:click', (evt) => {
    
        const item = evt.item //  Operated node  item
        const target = evt.target //  The specific figure being operated 
        console.log(item, target)
      })
      // graph.on('click', (evt) => {
    
      // console.log(evt)
      // })
      // set hover state
      graph.on('node:mouseenter', (ev) => {
    
        const node = ev.item
        const edges = node.getEdges()
        edges.forEach((edge) => graph.setItemState(edge, 'running', true))
      })
      graph.on('node:mouseleave', (ev) => {
    
        const node = ev.item
        const edges = node.getEdges()
        edges.forEach((edge) => graph.setItemState(edge, 'running', false))
      })
      if (typeof window !== 'undefined') {
    
        window.onresize = () => {
    
          if (!graph || graph.get('destroyed')) return
          if (!container || !container.scrollWidth || !container.scrollHeight) return
          graph.changeSize(container.scrollWidth, container.scrollHeight)
        }
      }
    },
    renderG6 () {
    
      this.g6Register()
      this.newG6Graph()
    },
  },
  mounted () {
    
    this.renderG6()
  },
}
</script>

<style lang="less" scoped>

</style>

---

3、 ... and 、 effect