antv X6

graph配置项

https://x6.antv.antgroup.com/api/graph/graph

力导向图

https://x6.antv.antgroup.com/examples/layout/general#force

路由router

https://x6.antv.antgroup.com/api/registry/router

initGraph () {
  // https://x6.antv.antgroup.com/api/graph/graph
  this.graphIns = new Graph({
    container: document.getElementById('container'),
    // width: 800,
    // height: 600,
    background: {
      color: '#F2F7FA',
    },
    autoResize:true, // 是否监听容器大小改变，并自动更新画布大小。默认false
    // https://x6.antv.antgroup.com/api/graph/grid
    grid: {
      visible: true, // 网格默认不可见
      size: 10, // 网格大小 10px
      type: 'doubleMesh', // dot 点状网格。(默认值)  fixedDot  mesh 网状网格。 doubleMesh双线网状网格。
      args: [
        {
          color: '#eee', // 主网格线颜色
          thickness: 1, // 主网格线宽度
        },
        {
          color: '#ddd', // 次网格线颜色
          thickness: 1, // 次网格线宽度
          factor: 4, // 主次网格线间隔
        },
      ],
    },
    panning: true, // 画布是否可以拖拽平移，默认禁用。
    mousewheel: true, // 鼠标滚轮缩放，默认禁用。
    // 连线选项。类似defaultEdge的
    connecting: {
      // router: 'orth', // normal orth manhattan  oneSide metro  er
     /* router:{
        name: 'orth',
        args: {
          // padding: {
          //   bottom: 24,
          //   top:24,
          //   left:24,
          //   right:24,
          // },
          // padding:24,
          padding:{
            vertical:24,
            horizontal:24,
          }
        },
      },*/
      router:{
        name: 'er',
        // args: {
        //   // offset: 12,
        //   offset: 'center',
        // },
      },

      // connector: 'rounded',
      connectionPoint: 'anchor',
      // snap:true,
    },
  })

  const mockData ={
    "nodes": [
      {
        "id": "1722565963387195392",
        "label": "企业信息同步测试4"
      },
      {
        "id": "1727253635897049088",
        "label": "ks电能表一级-01"
      },
      {
        "id": "1727255697414242304",
        "label": "ks电能表一级-02"
      },
      {
        "id": "1731968551085125632",
        "label": "一级03"
      },
      {
        "id": "1727253787416281088",
        "label": "电能表二级-01"
      },
      {
        "id": "1731954552142540800",
        "label": "ks二级02"
      },
      {
        "id": "1727254037606514688",
        "label": "ks电能表三级-01"
      },
      {
        "id": "1727259731038650368",
        "label": "ks电能表三级-03"
      },
      {
        "id": "1727257737720840192",
        "label": "电能表三级-02"
      },
      {
        "id": "1727260183792795648",
        "label": "电能表四级-01"
      }
    ],
    "edges": [
      {
        "source": "1722565963387195392",
        "target": "1727253635897049088"
      },
      {
        "source": "1722565963387195392",
        "target": "1727255697414242304"
      },
      {
        "source": "1722565963387195392",
        "target": "1731968551085125632"
      },
      {
        "source": "1727253635897049088",
        "target": "1727253787416281088"
      },
      {
        "source": "1727253635897049088",
        "target": "1731954552142540800"
      },
      {
        "source": "1727253787416281088",
        "target": "1727254037606514688"
      },
      {
        "source": "1727253787416281088",
        "target": "1727259731038650368"
      },
      {
        "source": "1727253787416281088",
        "target": "1727257737720840192"
      },
      {
        "source": "1727254037606514688",
        "target": "1727260183792795648"
      },
      {
        "source": "1727259731038650368",
        "target": "1727260183792795648"
      },
      {
        "source": "1727257737720840192",
        "target": "1727260183792795648"
      },
      {
        "source": "1731954552142540800",
        "target": "1727254037606514688"
      },
      {
        "source": "1731954552142540800",
        "target": "1727259731038650368"
      },
      {
        "source": "1731954552142540800",
        "target": "1727257737720840192"
      },
      {
        "source": "1727254037606514688",
        "target": "1727260183792795648"
      },
      {
        "source": "1727259731038650368",
        "target": "1727260183792795648"
      },
      {
        "source": "1727257737720840192",
        "target": "1727260183792795648"
      },
      {
        "source": "1727255697414242304",
        "target": "1727253787416281088"
      },
      {
        "source": "1727255697414242304",
        "target": "1731954552142540800"
      },
      {
        "source": "1727253787416281088",
        "target": "1727254037606514688"
      },
      {
        "source": "1727253787416281088",
        "target": "1727259731038650368"
      },
      {
        "source": "1727253787416281088",
        "target": "1727257737720840192"
      },
      {
        "source": "1727254037606514688",
        "target": "1727260183792795648"
      },
      {
        "source": "1727259731038650368",
        "target": "1727260183792795648"
      },
      {
        "source": "1727257737720840192",
        "target": "1727260183792795648"
      },
      {
        "source": "1731954552142540800",
        "target": "1727254037606514688"
      },
      {
        "source": "1731954552142540800",
        "target": "1727259731038650368"
      },
      {
        "source": "1731954552142540800",
        "target": "1727257737720840192"
      },
      {
        "source": "1727254037606514688",
        "target": "1727260183792795648"
      },
      {
        "source": "1727259731038650368",
        "target": "1727260183792795648"
      },
      {
        "source": "1727257737720840192",
        "target": "1727260183792795648"
      },
      {
        "source": "1731968551085125632",
        "target": "1731954552142540800"
      },
      {
        "source": "1731954552142540800",
        "target": "1727254037606514688"
      },
      {
        "source": "1731954552142540800",
        "target": "1727259731038650368"
      },
      {
        "source": "1731954552142540800",
        "target": "1727257737720840192"
      },
      {
        "source": "1727254037606514688",
        "target": "1727260183792795648"
      },
      {
        "source": "1727259731038650368",
        "target": "1727260183792795648"
      },
      {
        "source": "1727257737720840192",
        "target": "1727260183792795648"
      }
    ],
    "tips": false
  }

  mockData.nodes.forEach(v=>{
    // v.width = 150
    // v.height = 32
    v.size = {width:160,height:32,}
  })

  mockData.edges.forEach(v=>{
    v.source = {
      cell:v.source,
      anchor:'bottom', // 锚点
    }
    v.target= {
      cell:v.target,
      anchor:'top',
    }
  })
  
  // 布局
  const dagreLayout = new DagreLayout({
    type: 'dagre',
    rankdir: 'TB',
    ranksep: 85,
    // nodesep: 55,
  })

  const model = dagreLayout.layout(mockData)
  this.graphIns.fromJSON(model) // 渲染元素

  /*this.graphIns.fromJSON(mockData) // 渲染元素
  this.graphIns.centerContent() // 居中显示*/
},