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
标签：11,过线,text,antV,port,cell,item,x6,id From： https://www.cnblogs.com/yeziyou/p/18229113