antv x6 数据下钻

所谓数据下钻就是在图中点击某节点展示节点内部子节点数据关系。效果展示点击加号后放大该节点并展示内部子节点关系子节点不可移出父节点范围。点击加号后变为关于antv x6如何绘制关系图本文不再重复介绍可参考我的另一篇学习内容使用antv X6绘制拓扑关系图层次布局_antv x6 绘制网络拓扑图-CSDN博客1.此处将父节点样式重新注册对应上述文章的第三点3.创建节点样式连接线样式//注册节点包含-表三个按钮 Graph.registerNode( org-node, { width: 320, height: 55, zIndex:2, markup: [ { tagName: rect, attrs: { class: card, }, }, { tagName: text, selector: title_text, }, { tagName: g, attrs: { class: btn add, }, children: [ { tagName: circle, attrs: { class: add, }, }, { tagName: text, attrs: { class: add, }, }, ], }, { tagName: g, attrs: { class: btn del, }, children: [ { tagName: circle, attrs: { class: del, }, }, { tagName: text, attrs: { class: del, }, }, ], }, { tagName: g, attrs: { class: btn info, }, children: [ { tagName: circle, attrs: { class: info, }, }, { tagName: text, attrs: { class: info, }, }, ], }, ], attrs: { .card: { rx: 10, ry: 10, refWidth: 100%, refHeight: 100%, fill: #032B52, stroke: #3486f8, strokeWidth: 1, pointerEvents: visiblePainted, }, title_text: { ref: .card, refY: 0.4, refX: 0.5, textAnchor: middle, fontWeight: bold, fill: #9eedff, fontSize: 22, cursor: pointer, event: node:link, }, .btn.add: { refDx: -80, refY: 6, event: node:add, }, .btn.del: { refDx: -48, refY: 6, event: node:delete, }, .btn.info: { refDx: -16, refY: 6, event: node:link, }, .btn circle: { r: 13, // fill: transparent,透明 fill: #021b34, stroke: #4dd5fa, strokeWidth: 1, }, .btn.add text: { fontSize: 20, fontWeight: 800, fill: #4dd5fa, x: -5.5, y: 6, fontFamily: Times New Roman, text: , }, .btn.del text: { fontSize: 28, fontWeight: 500, fill: #4dd5fa, x: -4.5, y: 6, fontFamily: Times New Roman, text: -, }, .btn.info text: { fontSize: 14, fontWeight: 500, fill: #4dd5fa, x: -7, y: 5, fontFamily: Times New Roman, text: 表, }, }, }, true, ) //注册带动画延箭头方向流动虚线 Graph.registerEdge( business-edge, { inherit: edge, connector: {name: smooth}, attrs: { line: { strokeWidth: 2, stroke: #aabefd, targetMarker: { name: classic, size: 20 }, strokeDasharray: 5, style: { animation: running-line 20s infinite linear,//动画效果 }, }, }, defaultLabel: { markup: [ { tagName: rect, selector: body, }, { tagName: text, selector: label, }, ], attrs: { label: { fill: #525151, fontSize: 12, textAnchor: middle, textVerticalAnchor: middle, pointerEvents: none, }, body: { ref: label, fill: #B1C2F8, stroke: #7d94d7, strokeWidth: 2, rx: 3, ry: 3, refWidth: 140%, refHeight: 140%, refX: -20%, refY: -20%, }, }, position: { distance: 0.5, options: { absoluteDistance: true, reverseDistance: true, }, }, }, }, true, )2.注册节点中node:addnode:delete等为-按钮的自定义事件。注册这些事件var prevNode; var prevNodeX; var prevNodeY; graph.on(node:add, ({e, node, cell}) { //记录一下上一次打开的节点并在打开下一个节点时关闭上一个节点 if (prevNode) { const cells prevNode.getChildren() if (cells) { cells.forEach((cell) { prevNode.removeChild(cell) }) } prevNode.position(prevNodeX, prevNodeY) prevNode.prop(size, {width: 320, height: 55}) prevNode.attr(title_text/refY, 0.4) } prevNode node; let box node.position() prevNodeX box.x; prevNodeY box.y; node.attr(title_text/refY, 0.02) cell.zIndex 4 let box node.getBBox() //模拟数据 const componentData { nodes: [ { id: 子系统-同花顺-transmid, shape: org-node, attrs: { title_text: { text: 子系统-同花顺-transmid } }, }, { id: 子系统-同花顺-应用服务器, shape: org-node, attrs: { title_text: { text: 子系统-同花顺-应用服务器 } }, }, edges:[ { id: 子系统-同花顺-transmid-子系统-同花顺-应用服务器, source: 子系统-同花顺-transmid, target: 子系统-同花顺-应用服务器, shape: transaction-edge, } ] componentLayout.begin [box.x 50, box.y 50] const model componentLayout.layout(componentData) for (let i 0; i model.nodes.length; i) { let item model.nodes[i] node.addChild(graph.addNode({ id: item.id, x: item.x, y: item.y, width: 230, height: 50, label: item.id, zIndex: 10, attrs: { body: { fill: #054380, stroke: #3486f8, rx: 10, ry: 10, }, label: { fill: #9eedff, fontSize: 18, cursor: pointer, event: node:ip, }, }, })) } for (let i 0; i model.edges.length; i) { let item model.edges[i] node.addChild(graph.addEdge({ id: item.id, source: item.source, target: item.target, shape: business-edge, attrs: { line: { stroke: #3486f8, } } }) node.fit({padding: {top: 90, bottom: 90, left: 50, right: 50}}) graph.centerCell(cell) } } }) }) //关闭内部组件 graph.on(node:delete, ({e, node}) { e.stopPropagation() const cells node.getChildren() if (cells) { cells.forEach((cell) { node.removeChild(cell) }) } //放大时居中了节点缩小时回到原来位置 node.position(prevNodeX, prevNodeY) node.prop(size, {width: 320, height: 55}) node.attr(title_text/refY, 0.4) })3.初始化时需要注意的点子节点移动时不能移出父节点需要配置如下const graph new Graph({ container: document.getElementById(container), width: $(window).width() - 10, height: $(window).height() - 50, background: { color: rgba(65,73,86,0), }, autoResize: true, mousewheel: true, panning: true, resizing: { enabled: true }, //不可移出父节点范围 translating: { restrict(view) { if (view) { const cell view.cell if (cell.isNode()) { const parent cell.getParent() if (parent) { return parent.getBBox() } } } return null }, } }); //顺便给出布局 var componentLayout new layout.DagreLayout({ type: dagre, begin: [0, 0], rankdir: LR, ranksep: 80, nodesep: 20, controlPoints: true, connecting: { allowLoop: true, } })