antV x6 禁止拖拽出新的線，鼠標(biāo)滑過線設(shè)置高亮

antV x6中的ER圖；

代碼如下：

// 鼠標(biāo)滑過事件
    graph.on('edge:mouseenter', ({ cell }) => {
      cell.removeTools()
      cell.attr('line', { stroke: 'blue', strokeWidth: 2 })
      cell.zIndex = 0
    })

    // 鼠標(biāo)滑出事件
    graph.on('edge:mouseleave', ({ cell, index, options }) => {
      cell.attr('line', { stroke: '#A2B1C3', strokeWidth: 2 })
    })

    //新增線的時(shí)候，將當(dāng)前線刪除
    graph.on('edge:added', ({ edge, options }) => {
      console.log(edge, options);
      graph.removeEdge(edge.id);
    })

以下為完整代碼：

其中 antV.x6.js 可在antV官方網(wǎng)站下載快速上手 | X6 (antgroup.com)

re.js是當(dāng)前ER圖需要的數(shù)據(jù)

<!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,
              },
            },
          })
        },
      },
    })

    // 鼠標(biāo)滑過事件
    graph.on('edge:mouseenter', ({ cell }) => {
      cell.removeTools()
      cell.attr('line', { stroke: 'blue', strokeWidth: 2 })
      cell.zIndex = 0
    })

    // 鼠標(biāo)滑出事件
    graph.on('edge:mouseleave', ({ cell, index, options }) => {
      cell.attr('line', { stroke: '#A2B1C3', strokeWidth: 2 })
    })

    //新增線的時(shí)候，將當(dāng)前線刪除
    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,  //當(dāng)前層第幾個(gè)
    ports:[
      {id:'-1-1',text:'ID'},
      {id:'-1-2',text:'跆拳道'},
    ]
  },
  {
    id:1,
    name:'學(xué)生1',
    level:'-1', //層級
    number:1,  //當(dāng)前層第幾個(gè)
    ports:[
      {id:'1-1',text:'ID'},
      {id:'1-2',text:'張曉明'},
      {id:'1-3',text:'9'}
    ]
  },
  {
    id:2,
    name:'學(xué)生2',
    level:'-1',
    number:2,
    ports:[
      {id:'2-1',text:'ID'},
      {id:'2-2',text:'王一一'},
      {id:'2-3',text:'7'}
    ]
  },
  {
    id:3,
    name:'學(xué)生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:'學(xué)號'},
      {id:'11-3',text:'學(xué)生姓名'},
      {id:'11-4',text:'學(xué)生年齡'},
    ]
  },
  {
    id:21,
    name:'教師1',
    number:1,
    level:'1',
    ports:[
      {id:'21-1',text:'ID'},
      {id:'21-2',text:'教師姓名'},
      {id:'21-3',text:'專業(yè)'}
    ]
  },
  {
    id:22,
    name:'教師2',
    level:'1',
    number:2,
    ports:[
      {id:'22-1',text:'ID'},
      {id:'22-2',text:'教師姓名'},
      {id:'22-3',text:'專業(yè)'}
    ]
  },
  {
    id:31,
    name:'畢業(yè)院校1',
    level:'2',
    number:1,
    ports:[
      {id:'31-1',text:'ID'},
      {id:'31-2',text:'畢業(yè)院校名稱'},
    ]
  },
]

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

posted @ 2024-06-03 16:12 爛筆頭~ Views(899) Comments(0) 收藏舉報(bào)

刷新頁面返回頂部

爛筆頭頭

好記性不如爛筆頭。站在岸上學(xué)不會(huì)游泳。

antV x6 禁止拖拽出新的線，鼠標(biāo)滑過線設(shè)置高亮

公告