图形化引擎antv/G6

1.参考： G6 TreeGraph树图默认展开几层节点

graph.data(data)
        graph.render()
        graph.fitCenter() // 移到图中心
        setTimeout(() => {
          // 1 默认展开两层节点，之后，重新渲染
          G6.Util.traverseTree(data, function(item) {
            console.log(item)
            if (item.depth > 0) {
              //collapsed为true时默认收起
              item.collapsed = true
            }
          })
          graph.render()
          graph.fitCenter() // 移到图中心
        }, 10)

2.树形节点增删改，需要重新调用  graph.render()

3.树形图，右键菜单插件

以此为例，右键菜单的触发事件回调函数：  handleMenuClick

const menu = new G6.Menu({
          offsetX: 10,
          offsetY: 10,
          itemTypes: ['node'],
          getContent(e) {
            const {item} = e
            console.log(item.getModel())
            let {bqglParentUuid} = item.getModel()

            if (bqglParentUuid == 'root') {
              return ``
            }
            const outDiv = document.createElement('div')
            outDiv.innerHTML = `

              
增加节点
              
增加分类
              
删除节点
              
查看节点
              
编辑节点
            
`
            return outDiv
          },
          handleMenuClick: (target, item) => {
            var nodeId = item.get('id')

            const newParentData = graph.findDataById(nodeId)
            let newchildren = newParentData.children
            switch (target.className) {
              case 'add':
                var childData = {
                  id: 'child-data-' + new Date().getTime(),
                  type: 'flow-rect',
                  name: 'x-'
                }
                graph.addChild(childData, nodeId)
                graph.render()
                graph.fitCenter() // 移到图中心
                graph.fitView()

                break
              case 'addClassification':
                console.log(target.innerText)
                break
              case 'del':
                graph.removeChild(nodeId)
                graph.render()
                graph.fitCenter() // 移到图中心
                graph.fitView()
                // graph.fitView()
                break
              case 'proview':
                console.log(target.innerText)
                break
              case 'edit':
                console.log(target.innerText)
                break
              default:
                break
            }
          }
        })

4.树形图  矩形上线连接点的位置

//自定义节点
 G6.registerNode(
          'flow-rect',
    {
        getAnchorPoints() {
              //矩形上线连接点的位置
              return [
                [0.5, 0],
                [0.5, 1]
              ]
            }
     }，
      'rect'
     ）
 //连接线
        G6.registerEdge('line-arrow', {
          options: {
            style: {
              stroke: '#ccc'
            }
          },
          draw: function draw(cfg, group) {
            const startPoint = cfg.startPoint
            const endPoint = cfg.endPoint

            const stroke = (cfg.style && cfg.style.stroke) || this.options.style.stroke
            const startArrow = (cfg.style && cfg.style.startArrow) || undefined
            const endArrow = (cfg.style && cfg.style.endArrow) || undefined
            //连接线路径
            const keyShape = group.addShape('path', {
              attrs: {
                path: [
                  ['M', startPoint.x, startPoint.y],
                  ['L', startPoint.x, (startPoint.y + endPoint.y) / 2],
                  ['L', endPoint.x, (startPoint.y + endPoint.y) / 2],
                  ['L', endPoint.x, endPoint.y]
                ],
                stroke,
                lineWidth: 1,
                startArrow,
                endArrow
              },
              className: 'edge-shape',
              name: 'edge-shape'
            })

            return keyShape
          }
        })

5. 点击切换选中

          setState(name, value, item) {               var group = item.getContainer()               // 获取外边框               var nodeRect = group.find(function(e) {                 return e.get('name') === 'node-rect'               })               // 获取任务名称               var collapseTitleText = group.find(function(e) {                 return e.get('name') === 'node-name'               })               // 获取折叠点               var collapseText = group.find(function(e) {                 return e.get('name') === 'collapse-text'               })
                          // 设置状态               if (name === 'selected') {                 if (value) {                   nodeRect.attr({                     stroke: '#1258ED',                     lineWidth: 2                   })                   collapseTitleText.attr({                     fill: '#1258ED'                   })                 } else {                   nodeRect.attr({                     stroke: '#999999',                     lineWidth: 1                   })                   collapseTitleText.attr({                     fill: '#333'                   })                 }               }

        }

//点击节点文字
      graph.on('node-name:click', e => {
        const {item} = e
        graph.setItemState(item, 'selected', !item.hasState('selected')) // 切换选中
      })

。。。