mirror of
https://gitee.com/antv/g6.git
synced 2024-12-04 20:59:15 +08:00
685 lines
14 KiB
HTML
685 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>缓慢移动到画布中心</title>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="mountNode"></div>
|
|||
|
|
<script src="../build/g6.js"></script>
|
|||
|
|
<script src="../build/dagre.js"></script>
|
|||
|
|
<script>
|
|||
|
|
const data = {
|
|||
|
|
"edges": [{
|
|||
|
|
"callPerf": {
|
|||
|
|
"avgElapse": 0.0,
|
|||
|
|
"calls": 0,
|
|||
|
|
"status": "success"
|
|||
|
|
},
|
|||
|
|
"id": "edge-20233",
|
|||
|
|
"source": "msgconsole",
|
|||
|
|
"target": "osp"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"callPerf": {
|
|||
|
|
"avgElapse": 3.2,
|
|||
|
|
"calls": 6,
|
|||
|
|
"status": "success"
|
|||
|
|
},
|
|||
|
|
"id": "edge-20234",
|
|||
|
|
"source": "dst-web",
|
|||
|
|
"target": "DB_rm-nh4417a78t2y34vm2.mysql.rds.aliyuncs.com:3306"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"callPerf": {
|
|||
|
|
"avgElapse": 0.0,
|
|||
|
|
"calls": 0,
|
|||
|
|
"status": "success"
|
|||
|
|
},
|
|||
|
|
"id": "edge-20235",
|
|||
|
|
"source": "USER",
|
|||
|
|
"target": "dsrconsole"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"callPerf": {
|
|||
|
|
"avgElapse": 0.0,
|
|||
|
|
"calls": 0,
|
|||
|
|
"status": "success"
|
|||
|
|
},
|
|||
|
|
"id": "edge-20236",
|
|||
|
|
"source": "USER",
|
|||
|
|
"target": "osp"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"callPerf": {
|
|||
|
|
"avgElapse": 0.0,
|
|||
|
|
"calls": 0,
|
|||
|
|
"status": "success"
|
|||
|
|
},
|
|||
|
|
"id": "edge-20237",
|
|||
|
|
"source": "USER",
|
|||
|
|
"target": "dbpconsole"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"callPerf": {
|
|||
|
|
"avgElapse": 0.0,
|
|||
|
|
"calls": 0,
|
|||
|
|
"status": "success"
|
|||
|
|
},
|
|||
|
|
"id": "edge-20238",
|
|||
|
|
"source": "USER",
|
|||
|
|
"target": "msgconsole"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"callPerf": {
|
|||
|
|
"avgElapse": 0.0,
|
|||
|
|
"calls": 0,
|
|||
|
|
"status": "success"
|
|||
|
|
},
|
|||
|
|
"id": "edge-20239",
|
|||
|
|
"source": "USER",
|
|||
|
|
"target": "drmdata"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"callPerf": {
|
|||
|
|
"avgElapse": 0.0,
|
|||
|
|
"calls": 0,
|
|||
|
|
"status": "success"
|
|||
|
|
},
|
|||
|
|
"id": "edge-20240",
|
|||
|
|
"source": "drmdata",
|
|||
|
|
"target": "dsrconsole"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"callPerf": {
|
|||
|
|
"avgElapse": 0.0,
|
|||
|
|
"calls": 0,
|
|||
|
|
"status": "success"
|
|||
|
|
},
|
|||
|
|
"id": "edge-20241",
|
|||
|
|
"source": "drmdata",
|
|||
|
|
"target": "10.252.216.177:12200"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"callPerf": {
|
|||
|
|
"avgElapse": 0.0,
|
|||
|
|
"calls": 0,
|
|||
|
|
"status": "success"
|
|||
|
|
},
|
|||
|
|
"id": "edge-20242",
|
|||
|
|
"source": "drmdata",
|
|||
|
|
"target": "10.80.59.63:12200"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"callPerf": {
|
|||
|
|
"avgElapse": 0.0,
|
|||
|
|
"calls": 0,
|
|||
|
|
"status": "success"
|
|||
|
|
},
|
|||
|
|
"id": "edge-20243",
|
|||
|
|
"source": "drmdata",
|
|||
|
|
"target": "10.80.59.68:12200"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"callPerf": {
|
|||
|
|
"avgElapse": 3.1,
|
|||
|
|
"calls": 28461,
|
|||
|
|
"status": "success"
|
|||
|
|
},
|
|||
|
|
"id": "edge-20244",
|
|||
|
|
"source": "scheduler",
|
|||
|
|
"target": "ZDAL_scheduler_ds"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"callPerf": {
|
|||
|
|
"avgElapse": 2.1,
|
|||
|
|
"calls": 300,
|
|||
|
|
"status": "success"
|
|||
|
|
},
|
|||
|
|
"id": "edge-20245",
|
|||
|
|
"source": "scheduler",
|
|||
|
|
"target": "MQ"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"callPerf": {
|
|||
|
|
"avgElapse": 3.5,
|
|||
|
|
"calls": 4853,
|
|||
|
|
"status": "success"
|
|||
|
|
},
|
|||
|
|
"id": "edge-20246",
|
|||
|
|
"source": "dbpconsole",
|
|||
|
|
"target": "ZDAL_sharedataMysqlDataSource"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"callPerf": {
|
|||
|
|
"avgElapse": 0.0,
|
|||
|
|
"calls": 0,
|
|||
|
|
"status": "success"
|
|||
|
|
},
|
|||
|
|
"id": "edge-20247",
|
|||
|
|
"source": "dbpconsole",
|
|||
|
|
"target": "osp"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"callPerf": {
|
|||
|
|
"avgElapse": 0.0,
|
|||
|
|
"calls": 0,
|
|||
|
|
"status": "success"
|
|||
|
|
},
|
|||
|
|
"id": "edge-20248",
|
|||
|
|
"source": "dsrconsole",
|
|||
|
|
"target": "osp"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"callPerf": {
|
|||
|
|
"avgElapse": 0.0,
|
|||
|
|
"calls": 0,
|
|||
|
|
"status": "success"
|
|||
|
|
},
|
|||
|
|
"id": "edge-20249",
|
|||
|
|
"source": "dsrconsole",
|
|||
|
|
"target": "drmdata"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"callPerf": {
|
|||
|
|
"avgElapse": 0.0,
|
|||
|
|
"calls": 0,
|
|||
|
|
"status": "success"
|
|||
|
|
},
|
|||
|
|
"id": "edge-20250",
|
|||
|
|
"source": "dsrconsole",
|
|||
|
|
"target": "antscheduler"
|
|||
|
|
}],
|
|||
|
|
"nodes": [{
|
|||
|
|
"apdex": 0.0,
|
|||
|
|
"apdexLevel": "BAD",
|
|||
|
|
"application": {
|
|||
|
|
"groupId": "default",
|
|||
|
|
"name": "msgconsole"
|
|||
|
|
},
|
|||
|
|
"avgTime": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"errorRate": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"favorite": false,
|
|||
|
|
"favoriteId": 0,
|
|||
|
|
"id": "msgconsole",
|
|||
|
|
"status": "success",
|
|||
|
|
"totalCount": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"type": "app"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"apdex": 0.0,
|
|||
|
|
"apdexLevel": "BAD",
|
|||
|
|
"application": {
|
|||
|
|
"groupId": "default",
|
|||
|
|
"name": "osp"
|
|||
|
|
},
|
|||
|
|
"avgTime": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"errorRate": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"favorite": false,
|
|||
|
|
"favoriteId": 0,
|
|||
|
|
"id": "osp",
|
|||
|
|
"status": "success",
|
|||
|
|
"totalCount": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"type": "app"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"apdex": 0.0,
|
|||
|
|
"apdexLevel": "BAD",
|
|||
|
|
"application": {
|
|||
|
|
"groupId": "default",
|
|||
|
|
"name": "dst-web"
|
|||
|
|
},
|
|||
|
|
"avgTime": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"errorRate": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"favorite": false,
|
|||
|
|
"favoriteId": 0,
|
|||
|
|
"id": "dst-web",
|
|||
|
|
"status": "success",
|
|||
|
|
"totalCount": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"type": "app"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"application": {
|
|||
|
|
"groupId": "default",
|
|||
|
|
"name": "DB_rm-nh4417a78t2y34vm2.mysql.rds.aliyuncs.com:3306"
|
|||
|
|
},
|
|||
|
|
"id": "DB_rm-nh4417a78t2y34vm2.mysql.rds.aliyuncs.com:3306",
|
|||
|
|
"status": "success",
|
|||
|
|
"type": "db"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"application": {
|
|||
|
|
"groupId": "default",
|
|||
|
|
"name": "USER"
|
|||
|
|
},
|
|||
|
|
"id": "USER",
|
|||
|
|
"status": "success",
|
|||
|
|
"type": "user"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"apdex": 0.0,
|
|||
|
|
"apdexLevel": "BAD",
|
|||
|
|
"application": {
|
|||
|
|
"groupId": "default",
|
|||
|
|
"name": "dsrconsole"
|
|||
|
|
},
|
|||
|
|
"avgTime": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"errorRate": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"favorite": false,
|
|||
|
|
"favoriteId": 0,
|
|||
|
|
"id": "dsrconsole",
|
|||
|
|
"status": "success",
|
|||
|
|
"totalCount": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"type": "app"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"apdex": 0.0,
|
|||
|
|
"apdexLevel": "BAD",
|
|||
|
|
"application": {
|
|||
|
|
"groupId": "default",
|
|||
|
|
"name": "dbpconsole"
|
|||
|
|
},
|
|||
|
|
"avgTime": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"errorRate": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"favorite": false,
|
|||
|
|
"favoriteId": 0,
|
|||
|
|
"id": "dbpconsole",
|
|||
|
|
"status": "success",
|
|||
|
|
"totalCount": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"type": "app"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"apdex": 0.0,
|
|||
|
|
"apdexLevel": "BAD",
|
|||
|
|
"application": {
|
|||
|
|
"groupId": "default",
|
|||
|
|
"name": "drmdata"
|
|||
|
|
},
|
|||
|
|
"avgTime": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"errorRate": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"favorite": false,
|
|||
|
|
"favoriteId": 0,
|
|||
|
|
"id": "drmdata",
|
|||
|
|
"status": "success",
|
|||
|
|
"totalCount": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"type": "app"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"apdex": 0.0,
|
|||
|
|
"apdexLevel": "BAD",
|
|||
|
|
"application": {
|
|||
|
|
"groupId": "default",
|
|||
|
|
"name": "10.252.216.177:12200"
|
|||
|
|
},
|
|||
|
|
"avgTime": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"errorRate": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"favorite": false,
|
|||
|
|
"favoriteId": 0,
|
|||
|
|
"id": "10.252.216.177:12200",
|
|||
|
|
"status": "success",
|
|||
|
|
"totalCount": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"type": "app"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"apdex": 0.0,
|
|||
|
|
"apdexLevel": "BAD",
|
|||
|
|
"application": {
|
|||
|
|
"groupId": "default",
|
|||
|
|
"name": "10.80.59.63:12200"
|
|||
|
|
},
|
|||
|
|
"avgTime": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"errorRate": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"favorite": false,
|
|||
|
|
"favoriteId": 0,
|
|||
|
|
"id": "10.80.59.63:12200",
|
|||
|
|
"status": "success",
|
|||
|
|
"totalCount": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"type": "app"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"apdex": 0.0,
|
|||
|
|
"apdexLevel": "BAD",
|
|||
|
|
"application": {
|
|||
|
|
"groupId": "default",
|
|||
|
|
"name": "10.80.59.68:12200"
|
|||
|
|
},
|
|||
|
|
"avgTime": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"errorRate": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"favorite": false,
|
|||
|
|
"favoriteId": 0,
|
|||
|
|
"id": "10.80.59.68:12200",
|
|||
|
|
"status": "success",
|
|||
|
|
"totalCount": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"type": "app"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"apdex": 0.0,
|
|||
|
|
"apdexLevel": "BAD",
|
|||
|
|
"application": {
|
|||
|
|
"groupId": "default",
|
|||
|
|
"name": "scheduler"
|
|||
|
|
},
|
|||
|
|
"avgTime": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"errorRate": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"favorite": false,
|
|||
|
|
"favoriteId": 0,
|
|||
|
|
"id": "scheduler",
|
|||
|
|
"status": "success",
|
|||
|
|
"totalCount": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"type": "app"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"application": {
|
|||
|
|
"groupId": "default",
|
|||
|
|
"name": "ZDAL_scheduler_ds"
|
|||
|
|
},
|
|||
|
|
"id": "ZDAL_scheduler_ds",
|
|||
|
|
"status": "success",
|
|||
|
|
"type": "db"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"application": {
|
|||
|
|
"groupId": "default",
|
|||
|
|
"name": "MQ"
|
|||
|
|
},
|
|||
|
|
"id": "MQ",
|
|||
|
|
"status": "success",
|
|||
|
|
"type": "mq"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"application": {
|
|||
|
|
"groupId": "default",
|
|||
|
|
"name": "ZDAL_sharedataMysqlDataSource"
|
|||
|
|
},
|
|||
|
|
"id": "ZDAL_sharedataMysqlDataSource",
|
|||
|
|
"status": "success",
|
|||
|
|
"type": "db"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"apdex": 0.0,
|
|||
|
|
"apdexLevel": "BAD",
|
|||
|
|
"application": {
|
|||
|
|
"groupId": "default",
|
|||
|
|
"name": "antscheduler"
|
|||
|
|
},
|
|||
|
|
"avgTime": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"errorRate": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"favorite": false,
|
|||
|
|
"favoriteId": 0,
|
|||
|
|
"id": "antscheduler",
|
|||
|
|
"status": "success",
|
|||
|
|
"totalCount": {
|
|||
|
|
"empty": true,
|
|||
|
|
"name": "avgTime",
|
|||
|
|
"total": 0.0,
|
|||
|
|
"values": []
|
|||
|
|
},
|
|||
|
|
"type": "app"
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
// 自定义边
|
|||
|
|
G6.registerEdge('my-edge', {
|
|||
|
|
// 复写控制点的逻辑
|
|||
|
|
curvePosition: 0.5, // 弯曲的默认位置
|
|||
|
|
curveOffset: -20,
|
|||
|
|
getControlPoints(cfg) {
|
|||
|
|
const controlPoints = []; // 指定controlPoints
|
|||
|
|
const level = -5; // 从 -10， 10
|
|||
|
|
const offset = level * -25; // 根据不同的level 计算不同的偏移
|
|||
|
|
const { startPoint, endPoint } = cfg;
|
|||
|
|
const innerPoint = G6.Util.getControlPoint(startPoint, endPoint, 0.5, offset);
|
|||
|
|
controlPoints.push(innerPoint);
|
|||
|
|
return controlPoints;
|
|||
|
|
},
|
|||
|
|
}, 'quadratic');
|
|||
|
|
|
|||
|
|
// 自定义节点，设置锚点
|
|||
|
|
G6.registerNode('customNode', {
|
|||
|
|
getAnchorPoints: () => {
|
|||
|
|
return [
|
|||
|
|
[0.5, 1],
|
|||
|
|
[0.5, 0]
|
|||
|
|
]; // 底边中点
|
|||
|
|
},
|
|||
|
|
draw: (model, group) => {
|
|||
|
|
const widths = 150;
|
|||
|
|
const heights = 50;
|
|||
|
|
const aa = group.addShape('text', {
|
|||
|
|
attrs: {
|
|||
|
|
x: -widths / 4,
|
|||
|
|
y: -heights / 25,
|
|||
|
|
textBaseline: 'middle',
|
|||
|
|
fill: '#333',
|
|||
|
|
fontSize: 24,
|
|||
|
|
text: model.id.substr(0, 5),
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
const texta = group.addShape('rect', {
|
|||
|
|
attrs: {
|
|||
|
|
x: -widths / 2,
|
|||
|
|
y: -heights / 2,
|
|||
|
|
width: widths,
|
|||
|
|
height: heights,
|
|||
|
|
stroke: model.isselect ? '#d9d9d9' : 'red',
|
|||
|
|
fill: model.isselect && 'red',
|
|||
|
|
radius: 25,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
return texta;
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const graph = new G6.Graph({
|
|||
|
|
container: 'mountNode',
|
|||
|
|
width: 1000,
|
|||
|
|
height: 800,
|
|||
|
|
animate: true,
|
|||
|
|
layout: {
|
|||
|
|
type: 'dagre'
|
|||
|
|
},
|
|||
|
|
modes: {
|
|||
|
|
default: [ 'drag-node', 'drag-canvas', 'zoom-canvas' ]
|
|||
|
|
},
|
|||
|
|
defaultNode: {
|
|||
|
|
size: [20, 20],
|
|||
|
|
shape: 'customNode',
|
|||
|
|
style: {
|
|||
|
|
fill: '#40a9ff',
|
|||
|
|
stroke: '#096dd9'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
defaultEdge: {
|
|||
|
|
shape: 'my-edge',
|
|||
|
|
style: {
|
|||
|
|
stroke: '#A3B1BF',
|
|||
|
|
style: {
|
|||
|
|
endArrow: true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
graph.data(data)
|
|||
|
|
graph.render()
|
|||
|
|
|
|||
|
|
graph.fitView()
|
|||
|
|
|
|||
|
|
graph.on('node:click', evt => {
|
|||
|
|
const { item } = evt
|
|||
|
|
const model = item.getModel()
|
|||
|
|
const point = graph.getPointByCanvas(500, 400)
|
|||
|
|
const dx = point.x - model.x
|
|||
|
|
const dy = point.y - model.y
|
|||
|
|
graph.getNodes().forEach(node => {
|
|||
|
|
const model = node.getModel()
|
|||
|
|
model.x += dx
|
|||
|
|
model.y += dy
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
graph.refresh()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|