antV x6 禁止拖拽出新的线，鼠标滑过线设置高亮
antV x6中的ER图；
代码如下：
// 鼠标滑过事件 graph.on('edge:mouseenter', ({ cell }) => { cell.removeTools() cell.attr('line', { stroke: 'blue', strokeWidth: 2 }) cell.zIndex = 0 }) // 鼠标滑出事件 graph.on('edge:mouseleave', ({ cell, index, options }) => { cell.attr('line', { stroke: '#A2B1C3', strokeWidth: 2 }) }) //新增线的时候，将当前线删除 graph.on('edge:added', ({ edge, options }) => { console.log(edge, options); graph.removeEdge(edge.id); })
以下为完整代码：
其中 antV.x6.js 可在antV官方网站下载 快速上手 | X6 (antgroup.com)
re.js是当前ER图需要的数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/antV.x6.js"></script> <script src="./data/re.js"></script> <style type="text/css"> #container { width: 100%; height: 600px; overflow: auto; display: flex; } </style> </head> <body> <div id="container"> </div> <script> const LINE_HEIGHT = 24 const NODE_WIDTH = 250 X6.Graph.registerPortLayout( 'erPortPosition', (portsPositionArgs) => { return portsPositionArgs.map((_, index) => { return { position: { x: 0, y: (index + 1) * LINE_HEIGHT, }, angle: 0, } }) }, true, ) X6.Graph.registerNode( 'er-rect', { inherit: 'rect', markup: [ { tagName: 'rect', selector: 'body', }, { tagName: 'text', selector: 'label', }, ], attrs: { rect: { strokeWidth: 1, stroke: '#5F95FF', fill: '#5F95FF', }, label: { fontWeight: 'bold', fill: '#ffffff', fontSize: 12, }, }, ports: { groups: { list: { markup: [ { tagName: 'rect', selector: 'portBody', }, { tagName: 'text', selector: 'portNameLabel', }, { tagName: 'text', selector: 'portTypeLabel', }, ], attrs: { portBody: { width: NODE_WIDTH, height: LINE_HEIGHT, strokeWidth: 1, stroke: '#5F95FF', fill: '#EFF4FF', magnet: true, }, portNameLabel: { ref: 'portBody', refX: 6, refY: 6, fontSize: 10, }, portTypeLabel: { ref: 'portBody', refX: 95, refY: 6, fontSize: 10, }, }, position: 'erPortPosition', }, }, }, }, true, ) const graph = new X6.Graph({ container: document.getElementById('container'), interactions: [], connecting: { router: { name: 'er', args: { offset: 25, direction: 'H', }, }, createEdge() { return new X6.Shape.Edge({ attrs: { line: { stroke: '#A2B1C3', strokeWidth: 1, }, }, }) }, }, }) // 鼠标滑过事件 graph.on('edge:mouseenter', ({ cell }) => { cell.removeTools() cell.attr('line', { stroke: 'blue', strokeWidth: 2 }) cell.zIndex = 0 }) // 鼠标滑出事件 graph.on('edge:mouseleave', ({ cell, index, options }) => { cell.attr('line', { stroke: '#A2B1C3', strokeWidth: 2 }) })
//新增线的时候，将当前线删除 graph.on('edge:added', ({ edge, options }) => { graph.removeEdge(edge.id); }) const cells = [] data.forEach((item) => { if (item.shape === 'edge') { cells.push(graph.createEdge(item)) } else { cells.push(graph.createNode(item)) } }) graph.resetCells(cells) graph.zoomToFit({ padding: 10, maxScale: 1 }) </script> </body> </html>
re.js文件
var biaoList = [ { id:'-1', name:'兴趣班', level:'-2', //层级 number:1, //当前层第几个 ports:[ {id:'-1-1',text:'ID'}, {id:'-1-2',text:'跆拳道'}, ] }, { id:1, name:'学生1', level:'-1', //层级 number:1, //当前层第几个 ports:[ {id:'1-1',text:'ID'}, {id:'1-2',text:'张晓明'}, {id:'1-3',text:'9'} ] }, { id:2, name:'学生2', level:'-1', number:2, ports:[ {id:'2-1',text:'ID'}, {id:'2-2',text:'王一一'}, {id:'2-3',text:'7'} ] }, { id:3, name:'学生3', level:'-1', number:3, ports:[ {id:'3-1',text:'ID'}, {id:'3-2',text:'张伟伟'}, {id:'3-3',text:'8'} ] }, { id:11, level:'0', number:1, name:'班级1', ports:[ {id:'11-1',text:'ID'}, {id:'11-2',text:'学号'}, {id:'11-3',text:'学生姓名'}, {id:'11-4',text:'学生年龄'}, ] }, { id:21, name:'教师1', number:1, level:'1', ports:[ {id:'21-1',text:'ID'}, {id:'21-2',text:'教师姓名'}, {id:'21-3',text:'专业'} ] }, { id:22, name:'教师2', level:'1', number:2, ports:[ {id:'22-1',text:'ID'}, {id:'22-2',text:'教师姓名'}, {id:'22-3',text:'专业'} ] }, { id:31, name:'毕业院校1', level:'2', number:1, ports:[ {id:'31-1',text:'ID'}, {id:'31-2',text:'毕业院校名称'}, ] }, ] var sortArr = biaoList.sort((a, b) => a.level - b.level) var linkList = [ { "source": { "cell": "-1", "port": "-1-1" }, "target": { "cell": "1", "port": "1-1" }, }, { "source": { "cell": "-1", "port": "-1-1" }, "target": { "cell": "2", "port": "2-1" }, }, { "source": { "cell": "1", "port": "1-1" }, "target": { "cell": "11", "port": "11-2" }, }, { "source": { "cell": "2", "port": "2-1" }, "target": { "cell": "11", "port": "11-2" }, }, { "source": { "cell": "3", "port": "3-1" }, "target": { "cell": "11", "port": "11-2" }, }, { "source": { "cell": "11", "port": "11-1" }, "target": { "cell": "21", "port": "21-1" }, }, { "source": { "cell": "11", "port": "11-1" }, "target": { "cell": "22", "port": "22-1" }, }, { "source": { "cell": "21", "port": "21-1" }, "target": { "cell": "31", "port": "31-1" }, }, { "source": { "cell": "1", "port": "1-2" }, "target": { "cell": "11", "port": "11-3" }, }, { "source": { "cell": "2", "port": "2-2" }, "target": { "cell": "11", "port": "11-3" }, }, { "source": { "cell": "3", "port": "3-2" }, "target": { "cell": "11", "port": "11-3" }, }, ] var dataList =[]; var pointY ,pointX ; sortArr.map((item,index)=>{ var ports=[] cLevel = item.level item.ports.map((cItem,cIndex)=>{ var ceil = { "id": cItem.id, "group": "list", "attrs": { "portNameLabel": { "text": cItem.text } } } ports.push(ceil) }) pointY = item.level == 0?280:150*item.number var ceil = { "id": item.id, "shape": "er-rect", "label": item.name, "width": 150, "height": 24, "position": { "x": 250*(item.level), "y": pointY }, 'ports':ports } dataList.push(ceil) }) linkList.map((item,index)=>{ var ceil = { "id": "5"+index+1, "shape": "edge", "source":item.source, "target": item.target, "attrs": { "line": { "stroke": "#A2B1C3", "strokeWidth": 2 } }, "zIndex": 0, connector: { name: 'rounded', args: { radius: 10, }, }, } dataList.push(ceil) }) var data = dataList
