antv X6

本文主要是介绍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/graphthis.graphIns = new Graph({container: document.getElementById('container'),// width: 800,// height: 600,background: {color: '#F2F7FA',},autoResize:true, // 是否监听容器大小改变，并自动更新画布大小。默认false// https://x6.antv.antgroup.com/api/graph/gridgrid: {visible: true, // 网格默认不可见size: 10, // 网格大小 10pxtype: '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 = 32v.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() // 居中显示*/
},

这篇关于antv X6的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---