diff --git a/package-lock.json b/package-lock.json
index c42aa688..5bfa38e2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2761,6 +2761,21 @@
           "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
           "dev": true
         },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
         "emoji-regex": {
           "version": "9.2.2",
           "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -2778,6 +2793,40 @@
             "strip-ansi": "^7.0.1"
           }
         },
+        "string-width-cjs": {
+          "version": "npm:string-width@4.2.3",
+          "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+          "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.1"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "5.0.1",
+              "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+              "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+              "dev": true
+            },
+            "emoji-regex": {
+              "version": "8.0.0",
+              "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+              "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+              "dev": true
+            },
+            "strip-ansi": {
+              "version": "6.0.1",
+              "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+              "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^5.0.1"
+              }
+            }
+          }
+        },
         "strip-ansi": {
           "version": "7.1.0",
           "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.1.0.tgz",
@@ -2787,6 +2836,23 @@
             "ansi-regex": "^6.0.1"
           }
         },
+        "strip-ansi-cjs": {
+          "version": "npm:strip-ansi@6.0.1",
+          "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "5.0.1",
+              "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+              "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+              "dev": true
+            }
+          }
+        },
         "wrap-ansi": {
           "version": "8.1.0",
           "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
@@ -2797,6 +2863,60 @@
             "string-width": "^5.0.1",
             "strip-ansi": "^7.0.1"
           }
+        },
+        "wrap-ansi-cjs": {
+          "version": "npm:wrap-ansi@7.0.0",
+          "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+          "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "5.0.1",
+              "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+              "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+              "dev": true
+            },
+            "ansi-styles": {
+              "version": "4.3.0",
+              "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+              "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+              "dev": true,
+              "requires": {
+                "color-convert": "^2.0.1"
+              }
+            },
+            "emoji-regex": {
+              "version": "8.0.0",
+              "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+              "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+              "dev": true
+            },
+            "string-width": {
+              "version": "4.2.3",
+              "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+              "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+              "dev": true,
+              "requires": {
+                "emoji-regex": "^8.0.0",
+                "is-fullwidth-code-point": "^3.0.0",
+                "strip-ansi": "^6.0.1"
+              }
+            },
+            "strip-ansi": {
+              "version": "6.0.1",
+              "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+              "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^5.0.1"
+              }
+            }
+          }
         }
       }
     },
@@ -3560,6 +3680,11 @@
       "dev": true,
       "optional": true
     },
+    "@popperjs/core": {
+      "version": "npm:@sxzz/popperjs-es@2.11.7",
+      "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
+    },
     "@probe.gl/env": {
       "version": "3.6.0",
       "resolved": "https://registry.npmmirror.com/@probe.gl/env/-/env-3.6.0.tgz",
@@ -4028,6 +4153,11 @@
       "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
       "dev": true
     },
+    "@tweenjs/tween.js": {
+      "version": "23.1.2",
+      "resolved": "https://registry.npmmirror.com/@tweenjs/tween.js/-/tween.js-23.1.2.tgz",
+      "integrity": "sha512-kMCNaZCJugWI86xiEHaY338CU5JpD0B97p1j1IKNn/Zto8PgACjQx0UxbHjmOcLl/dDOBnItwD07KmCs75pxtQ=="
+    },
     "@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmmirror.com/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -4969,17 +5099,6 @@
             "color-convert": "^2.0.1"
           }
         },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
         "cliui": {
           "version": "6.0.0",
           "resolved": "https://registry.npmmirror.com/cliui/-/cliui-6.0.0.tgz",
@@ -5023,26 +5142,12 @@
             "universalify": "^0.1.0"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
         "is-fullwidth-code-point": {
           "version": "3.0.0",
           "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
           "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
           "dev": true
         },
-        "json5": {
-          "version": "2.2.3",
-          "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
-          "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-          "dev": true,
-          "optional": true
-        },
         "jsonfile": {
           "version": "4.0.0",
           "resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-4.0.0.tgz",
@@ -5052,18 +5157,6 @@
             "graceful-fs": "^4.1.6"
           }
         },
-        "loader-utils": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
-          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "minipass": {
           "version": "3.3.6",
           "resolved": "https://registry.npmmirror.com/minipass/-/minipass-3.3.6.tgz",
@@ -5102,28 +5195,6 @@
             "ansi-regex": "^5.0.1"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.8.3",
-          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
-          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
-        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -5709,6 +5780,11 @@
         "negotiator": "0.6.3"
       }
     },
+    "accessor-fn": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/accessor-fn/-/accessor-fn-1.5.0.tgz",
+      "integrity": "sha512-dml7D96DY/K5lt4Ra2jMnpL9Bhw5HEGws4p1OAIxFFj9Utd/RxNfEO3T3f0QIWFNwQU7gNxH9snUfqF/zNkP/w=="
+    },
     "acorn": {
       "version": "7.4.1",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-7.4.1.tgz",
@@ -6552,6 +6628,11 @@
         "tweetnacl": "^0.14.3"
       }
     },
+    "bezier-js": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmmirror.com/bezier-js/-/bezier-js-6.1.4.tgz",
+      "integrity": "sha512-PA0FW9ZpcHbojUCMu28z9Vg/fNkwTj5YhusSAjHHDfHDGLxJ6YUKrAN2vk1fP2MMOxVw4Oko16FMlRGVBGqLKg=="
+    },
     "bfj": {
       "version": "6.1.2",
       "resolved": "https://registry.npmmirror.com/bfj/-/bfj-6.1.2.tgz",
@@ -7093,6 +7174,14 @@
       "integrity": "sha512-J/jkFgsQ3NEl4w2lCoM9ZPxrD+FoBNJ7uJUpGVjIg/j0OwJosWM36EPDv+Yyi0V4twBk9pPmlFS+PLykgEvUmg==",
       "dev": true
     },
+    "canvas-color-tracker": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/canvas-color-tracker/-/canvas-color-tracker-1.2.1.tgz",
+      "integrity": "sha512-i5clg2pEdaWqHuEM/B74NZNLkHh5+OkXbA/T4iaBiaNDagkOCXkLNrhqUfdUugsRwuaNRU20e/OygzxWRor3yg==",
+      "requires": {
+        "tinycolor2": "^1.6.0"
+      }
+    },
     "capture-exit": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/capture-exit/-/capture-exit-2.0.0.tgz",
@@ -8779,6 +8868,43 @@
         "type": "^1.0.1"
       }
     },
+    "d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmmirror.com/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "requires": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      }
+    },
     "d3-array": {
       "version": "3.2.4",
       "resolved": "https://registry.npmmirror.com/d3-array/-/d3-array-3.2.4.tgz",
@@ -8787,21 +8913,94 @@
         "internmap": "1 - 2"
       }
     },
+    "d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw=="
+    },
+    "d3-binarytree": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/d3-binarytree/-/d3-binarytree-1.0.2.tgz",
+      "integrity": "sha512-cElUNH+sHu95L04m92pG73t2MEJXKu+GeKUN1TJkFsu93E5W8E9Sc3kHEGJKgenGvj19m6upSn2EunvMgMD2Yw=="
+    },
+    "d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      }
+    },
+    "d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "requires": {
+        "d3-path": "1 - 3"
+      }
+    },
     "d3-color": {
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/d3-color/-/d3-color-3.1.0.tgz",
       "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
     },
+    "d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "requires": {
+        "d3-array": "^3.2.0"
+      }
+    },
+    "d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmmirror.com/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "requires": {
+        "delaunator": "5"
+      }
+    },
     "d3-dispatch": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
       "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
     },
+    "d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      }
+    },
+    "d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "requires": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      }
+    },
     "d3-ease": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/d3-ease/-/d3-ease-3.0.1.tgz",
       "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
     },
+    "d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "requires": {
+        "d3-dsv": "1 - 3"
+      }
+    },
     "d3-force": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/d3-force/-/d3-force-3.0.0.tgz",
@@ -8812,6 +9011,23 @@
         "d3-timer": "1 - 3"
       }
     },
+    "d3-force-3d": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmmirror.com/d3-force-3d/-/d3-force-3d-3.0.5.tgz",
+      "integrity": "sha512-tdwhAhoTYZY/a6eo9nR7HP3xSW/C6XvJTbeRpR92nlPzH6OiE+4MliN9feuSFd0tPtEUo+191qOhCTWx3NYifg==",
+      "requires": {
+        "d3-binarytree": "1",
+        "d3-dispatch": "1 - 3",
+        "d3-octree": "1",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      }
+    },
+    "d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA=="
+    },
     "d3-geo": {
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/d3-geo/-/d3-geo-3.1.0.tgz",
@@ -8830,6 +9046,11 @@
         "d3-geo": "1.12.0 - 3"
       }
     },
+    "d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA=="
+    },
     "d3-interpolate": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
@@ -8838,16 +9059,81 @@
         "d3-color": "1 - 3"
       }
     },
+    "d3-octree": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/d3-octree/-/d3-octree-1.0.2.tgz",
+      "integrity": "sha512-Qxg4oirJrNXauiuC94uKMbgxwnhdda9xRLl9ihq45srlJ4Ga3CSgqGcAL8iW7N5CIv4Oz8x3E734ulxyvHPvwA=="
+    },
+    "d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="
+    },
+    "d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg=="
+    },
     "d3-quadtree": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
       "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw=="
     },
+    "d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ=="
+    },
+    "d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "requires": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      }
+    },
+    "d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      }
+    },
     "d3-selection": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
     },
+    "d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "requires": {
+        "d3-path": "^3.1.0"
+      }
+    },
+    "d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "requires": {
+        "d3-array": "2 - 3"
+      }
+    },
+    "d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "requires": {
+        "d3-time": "1 - 3"
+      }
+    },
     "d3-timer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/d3-timer/-/d3-timer-3.0.1.tgz",
@@ -8865,6 +9151,18 @@
         "d3-timer": "1 - 3"
       }
     },
+    "d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      }
+    },
     "dagre": {
       "version": "0.8.5",
       "resolved": "https://registry.npmmirror.com/dagre/-/dagre-0.8.5.tgz",
@@ -9164,6 +9462,14 @@
         }
       }
     },
+    "delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "requires": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -9589,13 +9895,6 @@
         "lodash-unified": "^1.0.2",
         "memoize-one": "^6.0.0",
         "normalize-wheel-es": "^1.2.0"
-      },
-      "dependencies": {
-        "@popperjs/core": {
-          "version": "npm:@sxzz/popperjs-es@2.11.7",
-          "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
-          "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
-        }
       }
     },
     "element-resize-detector": {
@@ -11087,6 +11386,27 @@
       "integrity": "sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==",
       "dev": true
     },
+    "force-graph": {
+      "version": "1.43.5",
+      "resolved": "https://registry.npmmirror.com/force-graph/-/force-graph-1.43.5.tgz",
+      "integrity": "sha512-HveLELh9yhZXO/QOfaFS38vlwJZ/3sKu+jarfXzRmbmihSOH/BbRWnUvmg8wLFiYy6h4HlH4lkRfZRccHYmXgA==",
+      "requires": {
+        "@tweenjs/tween.js": "18 - 23",
+        "accessor-fn": "1",
+        "bezier-js": "3 - 6",
+        "canvas-color-tracker": "1",
+        "d3-array": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-force-3d": "2 - 3",
+        "d3-scale": "1 - 4",
+        "d3-scale-chromatic": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-zoom": "2 - 3",
+        "index-array-by": "1",
+        "kapsule": "^1.14",
+        "lodash-es": "4"
+      }
+    },
     "foreground-child": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/foreground-child/-/foreground-child-3.1.1.tgz",
@@ -12378,6 +12698,11 @@
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
       "dev": true
     },
+    "index-array-by": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/index-array-by/-/index-array-by-1.4.1.tgz",
+      "integrity": "sha512-Zu6THdrxQdyTuT2uA5FjUoBEsFHPzHcPIj18FszN6yXKHxSfGcR4TPLabfuT//E25q1Igyx9xta2WMvD/x9P/g=="
+    },
     "indexes-of": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/indexes-of/-/indexes-of-1.0.1.tgz",
@@ -12779,6 +13104,12 @@
       "resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
     },
+    "is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true
+    },
     "is-generator-fn": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
@@ -15152,6 +15483,14 @@
         "verror": "1.10.0"
       }
     },
+    "kapsule": {
+      "version": "1.14.5",
+      "resolved": "https://registry.npmmirror.com/kapsule/-/kapsule-1.14.5.tgz",
+      "integrity": "sha512-H0iSpTynUzZw3tgraDmReprpFRmH5oP5GPmaNsurSwLx2H5iCpOMIkp5q+sfhB4Tz/UJd1E1IbEE9Z6ksnJ6RA==",
+      "requires": {
+        "lodash-es": "4"
+      }
+    },
     "kdbush": {
       "version": "4.0.2",
       "resolved": "https://registry.npmmirror.com/kdbush/-/kdbush-4.0.2.tgz",
@@ -19030,6 +19369,11 @@
         "inherits": "^2.0.1"
       }
     },
+    "robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+    },
     "rsvp": {
       "version": "4.8.5",
       "resolved": "https://registry.npmmirror.com/rsvp/-/rsvp-4.8.5.tgz",
@@ -20159,46 +20503,6 @@
         }
       }
     },
-    "string-width-cjs": {
-      "version": "npm:string-width@4.2.3",
-      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "requires": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
-          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-          "dev": true
-        },
-        "emoji-regex": {
-          "version": "8.0.0",
-          "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
-          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-          "dev": true
-        },
-        "strip-ansi": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
-          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^5.0.1"
-          }
-        }
-      }
-    },
     "string.prototype.trim": {
       "version": "1.2.8",
       "resolved": "https://registry.npmmirror.com/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz",
@@ -20248,23 +20552,6 @@
         "ansi-regex": "^2.0.0"
       }
     },
-    "strip-ansi-cjs": {
-      "version": "npm:strip-ansi@6.0.1",
-      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "requires": {
-        "ansi-regex": "^5.0.1"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
-          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-          "dev": true
-        }
-      }
-    },
     "strip-eof": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/strip-eof/-/strip-eof-1.0.0.tgz",
@@ -22115,6 +22402,94 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.8.3",
+      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
+      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "json5": {
+          "version": "2.2.3",
+          "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
+          "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
+          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-router": {
       "version": "4.2.5",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.2.5.tgz",
@@ -23012,81 +23387,6 @@
         }
       }
     },
-    "wrap-ansi-cjs": {
-      "version": "npm:wrap-ansi@7.0.0",
-      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
-      "requires": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
-          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-          "dev": true
-        },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
-        },
-        "emoji-regex": {
-          "version": "8.0.0",
-          "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
-          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-          "dev": true
-        },
-        "string-width": {
-          "version": "4.2.3",
-          "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
-          "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-          "dev": true,
-          "requires": {
-            "emoji-regex": "^8.0.0",
-            "is-fullwidth-code-point": "^3.0.0",
-            "strip-ansi": "^6.0.1"
-          }
-        },
-        "strip-ansi": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
-          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^5.0.1"
-          }
-        }
-      }
-    },
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
diff --git a/package.json b/package.json
index 4dbe3cac..5a2d05ea 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cn",
-  "version": "0.1.0",
+  "version": "24.4.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -18,10 +18,12 @@
     "babel-plugin-lodash": "~3.3.0",
     "codemirror": "^5.65.1",
     "core-js": "~3.31.0",
+    "d3": "^7.9.0",
     "dayjs": "^1.10.5",
     "dexie": "~3.2.0",
     "echarts": "^5.1.1",
     "element-plus": "^2.5.1",
+    "force-graph": "^1.43.5",
     "h3-js": "~3.7.2",
     "lib-flexible": "^0.3.2",
     "lodash": "^4.17.21",
diff --git a/public/images/entity-symbol/app-colored.svg b/public/images/entity-symbol/app-colored.svg
new file mode 100644
index 00000000..ba0c71e8
--- /dev/null
+++ b/public/images/entity-symbol/app-colored.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1687771200531" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7765" width="36" height="36" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M723.84487531 71.54166698c60.46291698 0 110.11458302 49.45145802 110.11458302 110.11458302v12.21270802h10.05045802c27.58870802 0 49.77179198 22.30320802 49.77179198 49.73175v256.78720896c0 27.42854198-22.34325 49.73175-49.77179198 49.73175h-10.05045802v292.22408302c0 60.50295802-49.4915 110.11458302-110.11458302 110.11458302H310.89516635a110.394875 110.394875 0 0 1-110.11458302-110.11458302v-292.22408302h-10.0905A49.81183302 49.81183302 0 0 1 140.95833333 500.38791698V243.60070802c0-27.42854198 22.30320802-49.73175 49.73175-49.73175h10.0905V181.65625C200.78058333 121.15329198 250.23204135 71.54166698 310.89516635 71.54166698z m54.97720802 688.31625H255.75779135v82.48583302a55.2575 55.2575 0 0 0 55.137375 55.137375h412.94970896a55.2575 55.2575 0 0 0 55.09733302-55.137375l-0.120125-82.48583302z m-261.47208302 27.508625c22.02291698 0 41.24291698 19.22 41.24291604 41.28295802 0 22.02291698-19.22 41.24291698-41.24291604 41.24291698-21.90279198 0-41.24291698-19.22-41.24291698-41.24291698s19.22-41.24291698 41.24291698-41.24291698z m261.59220802-237.246875H255.87791635v154.56083302h523.06429198v-154.56083302z m61.06354198-302.47475H194.73429135v248.65875h645.27145896v-248.65875z m-518.53958396 23.78475c12.41291698 0 23.5445 7.52783302 28.10925 18.97975l60.903375 150.55666604a24.865875 24.865875 0 0 1-23.10404104 34.27566698 25.106125 25.106125 0 0 1-23.26420896-15.8565l-6.56683302-16.697375H284.78800031l-6.32658396 16.53720802a25.14616698 25.14616698 0 1 1-46.76866604-18.41916604l61.70420802-150.55666698a30.43166698 30.43166698 0 0 1 28.10925-18.81958302z m217.82666698 0c40.722375 0 71.63454198 31.47275 71.63454198 69.6725 0 38.15970802-31.19245802 69.071875-74.4775 69.071875h-20.70154198v40.32195802a24.66566698 24.66566698 0 0 1-24.74575 24.74575 24.82583302 24.82583302 0 0 1-24.74575-24.74575V296.17541698a24.66566698 24.66566698 0 0 1 24.74575-24.74575z m190.878625 0c40.722375 0 71.67458302 31.47275 71.67458302 69.6725 0 38.15970802-31.2325 69.071875-74.4775 69.071875h-20.74158302v40.32195802a24.66566698 24.66566698 0 0 1-24.74575 24.74575 24.66566698 24.66566698 0 0 1-24.70570802-24.74575V296.17541698a24.66566698 24.66566698 0 0 1 24.70570802-24.74575zM321.10579135 348.30966698l-20.181 52.05416604H341.16666635l-20.02083302-52.05416604z m215.46420896-27.3885h-20.70154198v47.16908302h18.17891698c18.65941698 0 27.3885-11.57204198 27.3885-25.14616698 0-11.01145802-6.68695802-22.02291698-24.82583396-22.02291604z m190.7585 0h-20.70154198v47.16908302h18.138875c18.69945802 0 27.42854198-11.57204198 27.42854198-25.14616698 0-11.01145802-6.727-22.02291698-24.82583396-22.02291604z m-3.3635-194.40229198H311.01529135A55.2575 55.2575 0 0 0 255.87791635 181.65625v12.21270802h523.22445896V181.65625a55.2575 55.2575 0 0 0-55.137375-55.137375z" p-id="7766" fill="#E5A219"></path></svg>
\ No newline at end of file
diff --git a/public/images/entity-symbol/app.svg b/public/images/entity-symbol/app.svg
new file mode 100644
index 00000000..313b0268
--- /dev/null
+++ b/public/images/entity-symbol/app.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688290120782" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7911" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36"><path d="M723.84487531 71.54166698c60.46291698 0 110.11458302 49.45145802 110.11458302 110.11458302v12.21270802h10.05045802c27.58870802 0 49.77179198 22.30320802 49.77179198 49.73175v256.78720896c0 27.42854198-22.34325 49.73175-49.77179198 49.73175h-10.05045802v292.22408302c0 60.50295802-49.4915 110.11458302-110.11458302 110.11458302H310.89516635a110.394875 110.394875 0 0 1-110.11458302-110.11458302v-292.22408302h-10.0905A49.81183302 49.81183302 0 0 1 140.95833333 500.38791698V243.60070802c0-27.42854198 22.30320802-49.73175 49.73175-49.73175h10.0905V181.65625C200.78058333 121.15329198 250.23204135 71.54166698 310.89516635 71.54166698z m54.97720802 688.31625H255.75779135v82.48583302a55.2575 55.2575 0 0 0 55.137375 55.137375h412.94970896a55.2575 55.2575 0 0 0 55.09733302-55.137375l-0.120125-82.48583302z m-261.47208302 27.508625c22.02291698 0 41.24291698 19.22 41.24291604 41.28295802 0 22.02291698-19.22 41.24291698-41.24291604 41.24291698-21.90279198 0-41.24291698-19.22-41.24291698-41.24291698s19.22-41.24291698 41.24291698-41.24291698z m261.59220802-237.246875H255.87791635v154.56083302h523.06429198v-154.56083302z m61.06354198-302.47475H194.73429135v248.65875h645.27145896v-248.65875z m-518.53958396 23.78475c12.41291698 0 23.5445 7.52783302 28.10925 18.97975l60.903375 150.55666604a24.865875 24.865875 0 0 1-23.10404104 34.27566698 25.106125 25.106125 0 0 1-23.26420896-15.8565l-6.56683302-16.697375H284.78800031l-6.32658396 16.53720802a25.14616698 25.14616698 0 1 1-46.76866604-18.41916604l61.70420802-150.55666698a30.43166698 30.43166698 0 0 1 28.10925-18.81958302z m217.82666698 0c40.722375 0 71.63454198 31.47275 71.63454198 69.6725 0 38.15970802-31.19245802 69.071875-74.4775 69.071875h-20.70154198v40.32195802a24.66566698 24.66566698 0 0 1-24.74575 24.74575 24.82583302 24.82583302 0 0 1-24.74575-24.74575V296.17541698a24.66566698 24.66566698 0 0 1 24.74575-24.74575z m190.878625 0c40.722375 0 71.67458302 31.47275 71.67458302 69.6725 0 38.15970802-31.2325 69.071875-74.4775 69.071875h-20.74158302v40.32195802a24.66566698 24.66566698 0 0 1-24.74575 24.74575 24.66566698 24.66566698 0 0 1-24.70570802-24.74575V296.17541698a24.66566698 24.66566698 0 0 1 24.70570802-24.74575zM321.10579135 348.30966698l-20.181 52.05416604H341.16666635l-20.02083302-52.05416604z m215.46420896-27.3885h-20.70154198v47.16908302h18.17891698c18.65941698 0 27.3885-11.57204198 27.3885-25.14616698 0-11.01145802-6.68695802-22.02291698-24.82583396-22.02291604z m190.7585 0h-20.70154198v47.16908302h18.138875c18.69945802 0 27.42854198-11.57204198 27.42854198-25.14616698 0-11.01145802-6.727-22.02291698-24.82583396-22.02291604z m-3.3635-194.40229198H311.01529135A55.2575 55.2575 0 0 0 255.87791635 181.65625v12.21270802h523.22445896V181.65625a55.2575 55.2575 0 0 0-55.137375-55.137375z" p-id="7912" fill="#778391"></path></svg>
\ No newline at end of file
diff --git a/public/images/entity-symbol/domain-colored.svg b/public/images/entity-symbol/domain-colored.svg
new file mode 100644
index 00000000..dd83f1db
--- /dev/null
+++ b/public/images/entity-symbol/domain-colored.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688298522321" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7364" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36"><path d="M512 61.06201172a450.93798828 450.93798828 0 1 1 0 901.87597656 450.93798828 450.93798828 0 0 1 0-901.87597656z m0 45.09379883a405.84418945 405.84418945 0 1 0 0 811.6883789 405.84418945 405.84418945 0 0 0 0-811.6883789z" p-id="7365" fill="#38ACD2"></path><path d="M229.64344446 586.23133044l15.95626722-52.586307c4.64812962-15.19314186 8.18625866-30.6637832 10.54501134-46.41192491h0.69375048c3.1912538 18.3150199 6.17438209 31.77378466 10.12876124 46.48129978l15.05439124 52.51693213h46.82817591l49.11755284-149.36453686h-48.77067761l-13.73626514 59.24631408c-3.60750391 17.06626868-6.93750745 33.855037-9.22688438 50.99068056h-0.69375136a864.41343565 864.41343565 0 0 0-11.79376257-50.64380531l-15.95626721-59.59318933h-39.33566772l-17.06626869 61.39694129c-3.88500427 14.63814112-8.46375903 31.70440892-11.79376256 48.84005335h-0.69375049A890.56783897 890.56783897 0 0 0 199.81216237 497.84748474l-12.7650143-61.05006603h-50.78255506l46.55067554 149.36453685h46.82817591zM570.27506324 496.04373279c-3.53812904 17.20501843-6.86813258 33.99378674-9.1575104 51.06005543h-0.69375047c-3.1912538-17.13564355-7.49250818-33.855037-11.79376257-50.64380531l-15.95626721-59.59318933H493.26872999l-17.06626869 61.39694129c-3.88500427 14.63814112-8.46375903 31.77378466-11.79376256 48.84005335h-0.69375137a904.30410413 904.30410413 0 0 0-9.08813463-49.18692861l-12.83438917-61.05006603h-50.78255417l46.48129978 149.29516199h46.89755078l16.09501783-52.51693213c4.57875475-15.26251673 8.11688379-30.73315807 10.40626074-46.48130068h0.69375136c3.33000354 18.38439477 6.24375697 31.84315955 10.19813611 46.48130068l15.05439124 52.51693212h46.82817502l49.11755373-149.29516198H584.15007813l-13.73626514 59.24631408zM825.22846423 496.04373279c-3.60750391 17.20501843-6.93750745 33.99378674-9.15751039 51.06005543h-0.69375048c-3.26062867-17.13564355-7.56188305-33.855037-11.79376256-50.64380531l-16.02564208-59.59318933h-39.33566773l-16.99689381 61.39694129a710.40076917 710.40076917 0 0 0-11.79376257 48.84005335h-0.69375049a893.96721827 893.96721827 0 0 0-9.15751038-49.18692861l-12.76501342-61.05006603H645.89389464l46.55067554 149.29516199h46.82817591l16.09501784-52.51693213a328.14410573 328.14410573 0 0 0 10.47563559-46.48130068h0.69375136c3.26062867 18.38439477 6.24375697 31.84315955 10.12876036 46.48130068l15.05439124 52.51693212h46.82817591l49.1869286-149.29516198h-48.84005337l-13.73626426 59.24631408z" p-id="7366" fill="#38ACD2"></path><path d="M320.17791736 643.11889184c28.65190576 164.34955323 107.87824195 274.72529762 191.82208264 274.72529761 81.30758763 0 158.24454601-103.7157373 189.04707984-259.80965612l2.42812756-12.83438916 44.40004835 7.90875828C715.4077206 835.28784972 623.34699522 962.93798828 512 962.93798828c-109.26574291 0-200.07771705-123.00200805-233.93275317-299.56157396l-2.28937782-12.48751393 44.40004835-7.70063368zM512 61.06201172c109.40449353 0 200.14709193 123.14075868 234.00212804 299.83907432l2.28937782 12.48751393-44.40004834 7.70063369C675.10080202 216.67030556 595.94384069 106.15581055 512 106.15581055c-82.07071387 0-159.56267298 105.58886413-189.81020519 263.62528552l-2.28937782 12.69563854-44.40004834-7.63125792C307.06602784 190.65465198 399.7511288 61.06201172 512 61.06201172z" p-id="7367" fill="#38ACD2"></path><path d="M549.60129065 647.28139648V962.93798828h-60.14819006V647.28139648h60.14819006z m0-586.21938476v315.6565918h-60.14819006V61.06201172h60.14819006z" p-id="7368" fill="#38ACD2"></path><path d="M151.24960938 241.43720703h721.50078124v45.09379883H151.24960938V241.43720703z m0 496.03178711h721.50078124v45.09379883H151.24960938v-45.09379883z" p-id="7369" fill="#38ACD2"></path></svg>
\ No newline at end of file
diff --git a/public/images/entity-symbol/domain-colored2.svg b/public/images/entity-symbol/domain-colored2.svg
new file mode 100644
index 00000000..2bc41292
--- /dev/null
+++ b/public/images/entity-symbol/domain-colored2.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1687771150463" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7479" width="35.9765625" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M1099.86729167 250.4559668V115.17457031H125.84123698v135.28139649h974.02605469z m0 54.11255859H125.84123698v595.23814453h974.02605469V304.56852539zM71.72867839 61.06201172h1082.25117187v892.8572168H71.72867839V61.06201172z m324.31460117 504.74992185v44.34223492c0.1803752 10.31144837 2.1344401 18.12770712 5.89225608 23.50890074 3.72775374 5.38119362 11.15319987 8.05675843 22.27633663 8.05675844h99.65729541v44.34223581h-119.73906657c-20.14189651 0-34.15103728-4.65969284-41.99735827-13.9490154-7.81625876-9.28932256-11.7243877-23.32852556-11.72438769-42.14767035v-82.61183945c0-18.81914567 3.90812893-32.85834779 11.72438769-42.14767034 7.81625876-9.31938479 21.82539863-13.9490154 41.99735827-13.9490154h119.73906657v44.34223581h-99.65729541c-11.12313675 0-18.54858288 2.70562793-22.27633663 8.05675842-3.75781686 5.38119362-5.71188089 12.7465135-5.89225608 22.1560868z m327.98223044 64.15344416c0 18.12770712-3.72775374 32.01659717-11.21332523 41.66667012-7.4855706 9.62001071-21.40452288 14.43001562-41.7267946 14.43001563h-66.76888539c-20.17195963 0-34.18109951-4.65969284-41.99735738-13.9490154-7.81625876-9.28932256-11.7243877-23.32852556-11.7243877-42.14767035v-82.61183945c0-18.81914567 3.90812893-32.85834779 11.7243877-42.14767034 7.81625876-9.31938479 21.82539863-13.9490154 41.99735738-13.9490154h66.73882227c20.35233483 0 34.27128711 4.81000491 41.75685772 14.43001562 7.4855706 9.62001071 11.21332435 23.53896299 11.21332523 41.66667012v82.61183945zM678.39058559 611.20635742v-44.67292307c0-10.76238636-1.74362659-18.60870736-5.23088067-23.50890076-3.48725407-4.93025564-11.21332435-7.39538301-23.20827572-7.395383h-25.55315237c-11.12313675 0-18.57864512 2.70562793-22.30639886 8.05675842-3.72775374 5.38119362-5.6216933 12.98701406-5.62169418 22.84752534v44.31217268c0 9.86051038 1.89393956 17.4663317 5.62169418 22.84752444 3.72775374 5.38119362 11.18326211 8.05675843 22.30639886 8.05675932h25.55315237c11.99495049 0 19.63083405-2.46512737 22.93771293-7.39538301 3.30687888-4.90019251 5.14069306-12.62626367 5.50144346-23.14815036z m241.37207356-119.91944264c20.32227171 0 34.27128711 4.81000491 41.72679548 14.43001562 7.4855706 9.62001071 11.21332435 23.53896299 11.21332434 41.66667012v138.7085252h-45.63492441v-119.55869137c0-10.76238636-1.74362659-18.60870736-5.23088066-23.50890076-3.48725407-4.93025564-11.21332435-7.39538301-23.20827484-7.395383h-14.61039082v150.46297513h-46.17605l-0.24050055-150.46297513h-13.04713943c-11.12313675 0-18.54858288 2.70562793-22.30639886 8.05675842-3.72775374 5.38119362-5.59163105 12.98701406-5.59163105 22.84752534v119.55869137h-45.90548721v-138.7085252c0-18.81914567 3.90812893-32.85834779 11.72438769-42.14767035 7.81625876-9.31938479 21.82539863-13.9490154 41.99735828-13.94901539h115.28981204zM244.88886589 637.36076074h48.70130273v48.70130274H244.88886589v-48.70130274z" p-id="7480" fill="#38ACD2"></path></svg>
\ No newline at end of file
diff --git a/public/images/entity-symbol/domain.svg b/public/images/entity-symbol/domain.svg
new file mode 100644
index 00000000..5944d4e1
--- /dev/null
+++ b/public/images/entity-symbol/domain.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688290376101" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8107" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36"><path d="M512 61.06201172a450.93798828 450.93798828 0 1 1 0 901.87597656 450.93798828 450.93798828 0 0 1 0-901.87597656z m0 45.09379883a405.84418945 405.84418945 0 1 0 0 811.6883789 405.84418945 405.84418945 0 0 0 0-811.6883789z" p-id="8108" fill="#778391"></path><path d="M229.64344446 586.23133044l15.95626722-52.586307c4.64812962-15.19314186 8.18625866-30.6637832 10.54501134-46.41192491h0.69375048c3.1912538 18.3150199 6.17438209 31.77378466 10.12876124 46.48129978l15.05439124 52.51693213h46.82817591l49.11755284-149.36453686h-48.77067761l-13.73626514 59.24631408c-3.60750391 17.06626868-6.93750745 33.855037-9.22688438 50.99068056h-0.69375136a864.41343565 864.41343565 0 0 0-11.79376257-50.64380531l-15.95626721-59.59318933h-39.33566772l-17.06626869 61.39694129c-3.88500427 14.63814112-8.46375903 31.70440892-11.79376256 48.84005335h-0.69375049A890.56783897 890.56783897 0 0 0 199.81216237 497.84748474l-12.7650143-61.05006603h-50.78255506l46.55067554 149.36453685h46.82817591zM570.27506324 496.04373279c-3.53812904 17.20501843-6.86813258 33.99378674-9.1575104 51.06005543h-0.69375047c-3.1912538-17.13564355-7.49250818-33.855037-11.79376257-50.64380531l-15.95626721-59.59318933H493.26872999l-17.06626869 61.39694129c-3.88500427 14.63814112-8.46375903 31.77378466-11.79376256 48.84005335h-0.69375137a904.30410413 904.30410413 0 0 0-9.08813463-49.18692861l-12.83438917-61.05006603h-50.78255417l46.48129978 149.29516199h46.89755078l16.09501783-52.51693213c4.57875475-15.26251673 8.11688379-30.73315807 10.40626074-46.48130068h0.69375136c3.33000354 18.38439477 6.24375697 31.84315955 10.19813611 46.48130068l15.05439124 52.51693212h46.82817502l49.11755373-149.29516198H584.15007813l-13.73626514 59.24631408zM825.22846423 496.04373279c-3.60750391 17.20501843-6.93750745 33.99378674-9.15751039 51.06005543h-0.69375048c-3.26062867-17.13564355-7.56188305-33.855037-11.79376256-50.64380531l-16.02564208-59.59318933h-39.33566773l-16.99689381 61.39694129a710.40076917 710.40076917 0 0 0-11.79376257 48.84005335h-0.69375049a893.96721827 893.96721827 0 0 0-9.15751038-49.18692861l-12.76501342-61.05006603H645.89389464l46.55067554 149.29516199h46.82817591l16.09501784-52.51693213a328.14410573 328.14410573 0 0 0 10.47563559-46.48130068h0.69375136c3.26062867 18.38439477 6.24375697 31.84315955 10.12876036 46.48130068l15.05439124 52.51693212h46.82817591l49.1869286-149.29516198h-48.84005337l-13.73626426 59.24631408z" p-id="8109" fill="#778391"></path><path d="M320.17791736 643.11889184c28.65190576 164.34955323 107.87824195 274.72529762 191.82208264 274.72529761 81.30758763 0 158.24454601-103.7157373 189.04707984-259.80965612l2.42812756-12.83438916 44.40004835 7.90875828C715.4077206 835.28784972 623.34699522 962.93798828 512 962.93798828c-109.26574291 0-200.07771705-123.00200805-233.93275317-299.56157396l-2.28937782-12.48751393 44.40004835-7.70063368zM512 61.06201172c109.40449353 0 200.14709193 123.14075868 234.00212804 299.83907432l2.28937782 12.48751393-44.40004834 7.70063369C675.10080202 216.67030556 595.94384069 106.15581055 512 106.15581055c-82.07071387 0-159.56267298 105.58886413-189.81020519 263.62528552l-2.28937782 12.69563854-44.40004834-7.63125792C307.06602784 190.65465198 399.7511288 61.06201172 512 61.06201172z" p-id="8110" fill="#778391"></path><path d="M549.60129065 647.28139648V962.93798828h-60.14819006V647.28139648h60.14819006z m0-586.21938476v315.6565918h-60.14819006V61.06201172h60.14819006z" p-id="8111" fill="#778391"></path><path d="M151.24960938 241.43720703h721.50078124v45.09379883H151.24960938V241.43720703z m0 496.03178711h721.50078124v45.09379883H151.24960938v-45.09379883z" p-id="8112" fill="#778391"></path></svg>
\ No newline at end of file
diff --git a/public/images/entity-symbol/ip-colored.svg b/public/images/entity-symbol/ip-colored.svg
new file mode 100644
index 00000000..9d5dcf23
--- /dev/null
+++ b/public/images/entity-symbol/ip-colored.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1687770782238" class="icon" viewBox="0 0 1109 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7446" width="35.7392578125" height="33" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M306.07165232 286.53100586h88.45900173v402.31184159H306.07165232V286.53100586z m254.70480646 258.08684225h92.9683825c25.1773713 0 46.59692575-3.68265995 64.25866333-10.97282467 17.66173758-7.36532077 32.01659717-16.9853306 43.06457788-29.01034421 11.12313675-12.02501272 19.1648645-25.85377829 24.27549445-41.48629492a152.94313406 152.94313406 0 0 0 0-95.44854056 111.6071521 111.6071521 0 0 0-24.27549445-41.18566989 120.25012991 120.25012991 0 0 0-43.06457788-29.01034333A167.59861869 167.59861869 0 0 0 653.74484128 286.53100586H472.31745703v402.31184159h88.45900175v-144.30015625z m0-189.39395508h68.7680432c10.14610474 0 19.84127148 0.75156302 29.31096924 2.25468995a68.39226126 68.39226126 0 0 1 24.80158936 8.79329077 47.72427072 47.72427072 0 0 1 17.13564355 18.33814456 64.48413233 64.48413233 0 0 1 6.46344479 30.96440824c0 12.77657663-2.1795339 23.07299344-6.46344479 30.96440911a47.6491138 47.6491138 0 0 1-17.21079959 18.33814456 68.09163623 68.09163623 0 0 1-24.80158936 8.71813474c-9.39454172 1.50312692-19.08970846 2.25468994-29.31096923 2.25468994H560.85161569V355.29904907z" p-id="7447" fill="#7E9F54"></path><path d="M997.43474439 61.06201172H101.72158671C79.2498442 61.06201172 61.06201172 80.60265817 61.06201172 104.65268362v814.69463276c0 24.05002634 18.18783249 43.5906719 40.65957499 43.5906719h895.71315768c22.47174337 0 40.65957499-19.54064646 40.65957497-43.5906719V104.65268362c0-24.05002634-18.18783249-43.5906719-40.65957497-43.5906719z m-20.36736551 835.73840524H122.0889531V126.44802001h854.97842578v770.35239695z" p-id="7448" fill="#7E9F54"></path></svg>
\ No newline at end of file
diff --git a/public/images/entity-symbol/ip.svg b/public/images/entity-symbol/ip.svg
new file mode 100644
index 00000000..326dd5e3
--- /dev/null
+++ b/public/images/entity-symbol/ip.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688290403407" class="icon" viewBox="0 0 1109 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8307" xmlns:xlink="http://www.w3.org/1999/xlink" width="38.98828125" height="36"><path d="M306.07165232 286.53100586h88.45900173v402.31184159H306.07165232V286.53100586z m254.70480646 258.08684225h92.9683825c25.1773713 0 46.59692575-3.68265995 64.25866333-10.97282467 17.66173758-7.36532077 32.01659717-16.9853306 43.06457788-29.01034421 11.12313675-12.02501272 19.1648645-25.85377829 24.27549445-41.48629492a152.94313406 152.94313406 0 0 0 0-95.44854056 111.6071521 111.6071521 0 0 0-24.27549445-41.18566989 120.25012991 120.25012991 0 0 0-43.06457788-29.01034333A167.59861869 167.59861869 0 0 0 653.74484128 286.53100586H472.31745703v402.31184159h88.45900175v-144.30015625z m0-189.39395508h68.7680432c10.14610474 0 19.84127148 0.75156302 29.31096924 2.25468995a68.39226126 68.39226126 0 0 1 24.80158936 8.79329077 47.72427072 47.72427072 0 0 1 17.13564355 18.33814456 64.48413233 64.48413233 0 0 1 6.46344479 30.96440824c0 12.77657663-2.1795339 23.07299344-6.46344479 30.96440911a47.6491138 47.6491138 0 0 1-17.21079959 18.33814456 68.09163623 68.09163623 0 0 1-24.80158936 8.71813474c-9.39454172 1.50312692-19.08970846 2.25468994-29.31096923 2.25468994H560.85161569V355.29904907z" p-id="8308" fill="#778391"></path><path d="M997.43474439 61.06201172H101.72158671C79.2498442 61.06201172 61.06201172 80.60265817 61.06201172 104.65268362v814.69463276c0 24.05002634 18.18783249 43.5906719 40.65957499 43.5906719h895.71315768c22.47174337 0 40.65957499-19.54064646 40.65957497-43.5906719V104.65268362c0-24.05002634-18.18783249-43.5906719-40.65957497-43.5906719z m-20.36736551 835.73840524H122.0889531V126.44802001h854.97842578v770.35239695z" p-id="8309" fill="#778391"></path></svg>
\ No newline at end of file
diff --git a/src/assets/css/components/views/entityExplorer/entity-graph.scss b/src/assets/css/components/views/entityExplorer/entity-graph.scss
index e23434f1..529f019c 100644
--- a/src/assets/css/components/views/entityExplorer/entity-graph.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-graph.scss
@@ -1,6 +1,3 @@
-$color-business: var(--el-color-business);
-$color-primary: var(--el-text-color-primary);
-$color-regular: var(--el-text-color-regular);
 .graph-toolbar {
   position: fixed;
   top: 100px;
@@ -18,13 +15,12 @@ $color-regular: var(--el-text-color-regular);
       cursor: pointer;
 
       i {
-        color: $color-regular;
+        color: #575757;
         font-size: 18px;
       }
 
       &.toolbar--unactivated {
-        cursor: default;
-
+        cursor: not-allowed;
         i {
           opacity: .4;
         }
@@ -32,24 +28,137 @@ $color-regular: var(--el-text-color-regular);
     }
   }
 }
-
 .entity-graph {
   display: flex;
-
+  background-color:'orange';
+  border: 'solid 5px red';
   .entity-graph__chart {
     width: 100%;
+    height:100%;
+    overflow: hidden;
+    .force-graph-container .graph-tooltip {
+      padding: 8px 10px;
+      //border-radius: 10px;
+      background-color: white;
+      box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+
+      .primary-node-tooltip {
+        padding: 5px;
+
+        .tooltip__header {
+          display: flex;
+          align-items: center;
+
+          i {
+            color: #717171;
+            font-size: 14px;
+          }
+          .tooltip__title {
+            padding-left: 6px;
+            font-size: 15px;
+            line-height: 15px;
+            color: #111;
+          }
+        }
+        .tooltip__content {
+          padding-top: 10px;
+          color: #222;
+          font-size: 12px;
+
+          span:first-of-type {
+            padding-right: 20px;
+          }
+        }
+      }
+      .entity-node-tooltip {
+        width: 300px;
+        padding: 5px;
+
+        .tooltip__header {
+          display: flex;
+          align-items: center;
+          margin-bottom: 20px;
+
+          .tooltip__title {
+            font-size: 15px;
+            line-height: 15px;
+            color: #111;
+          }
+        }
+
+        .tooltip__content {
+          display: flex;
+          flex-direction: column;
+
+          .content-header {
+            display: flex;
+            align-items: center;
+
+            .header-icon {
+              width: 3px !important;
+              height: 12px !important;
+              background: #38ACD2;
+              border-radius: 1px;
+              margin-right: 6px;
+            }
+          }
+          .content-tag-list {
+            display: flex;
+            align-items: flex-start;
+            flex-wrap: wrap;
+
+            .entity-tag {
+              margin: 10px 9px 10px 0;
+              padding: 0 8px;
+              height: 20px;
+              font-size: 12px;
+              border: 1px solid;
+              border-radius: 2px;
+
+              $normal-color: #778391;
+              $normal-light-color: #F7F8F9;
+              $negative-color: #E26154;
+              $negative-light-color: #FEF6F5;
+              $positive-color: #749F4D;
+              $positive-light-color: #F7FAF5;
+              &.entity-tag--level-two-normal {
+                border-color: $normal-color;
+                color: $normal-color;
+                background-color: $normal-light-color;
+              }
+              &.entity-tag--level-two-negative {
+                border-color: $negative-color;
+                color: $negative-color;
+                background-color: $negative-light-color;
+              }
+              &.entity-tag--level-two-positive {
+                border-color: $positive-color;
+                color: $positive-color;
+                background-color: $positive-light-color;
+              }
+            }
+          }
+        }
+      }
+    }
+    .force-graph-container {
+      //height:100% !important;
+      canvas {
+        //height:100% !important;
+      }
+    }
 
     .graph-node {
       display: flex;
       flex-direction: column;
       align-items: center;
       background-color: transparent !important;
-      transition: linear all var(--el-transition-duration-fast);
+      transition: linear all .2s;
 
       .graph-node__text {
         width: 120px;
         font-size: 12px;
-        color: $color-primary;
+        color: #353636;
       }
 
       &.graph-node--root {
@@ -62,38 +171,30 @@ $color-regular: var(--el-text-color-regular);
           box-shadow: none;
           animation: none;
         }
-
         &.graph-node--ip {
-          border-color: var(--el-color-success-light-5) !important;
-          box-shadow: 0 0 0 8px rgba(126, 159, 84, 0.14);
-
+          border-color: #CBD9BB !important;
+          box-shadow: 0 0 0 8px rgba(126,159,84,0.14);
           i {
-            color: var(--el-color-success);
+            color: #7E9F54;
           }
         }
-
         &.graph-node--domain {
-          border-color: var(--el-color-primary-light-7) !important;
-          box-shadow: 0 0 0 8px rgba(56, 172, 210, 0.14);
-
+          border-color: #AFDEED !important;
+          box-shadow: 0 0 0 8px rgba(56,172,210,0.14);
           i {
-            color: $color-business;
+            color: #38ACD2;
           }
         }
-
         &.graph-node--app {
-          border-color: var(--el-color-warning-light-5) !important;
-          box-shadow: 0 0 0 8px rgba(229, 162, 25, 0.14);
-
+          border-color: #F5DAA3 !important;
+          box-shadow: 0 0 0 8px rgba(229,162,25,0.14);
           i {
-            color: var(--el-color-warning);
+            color: #E5A219;
           }
         }
-
         i {
           font-size: 36px;
         }
-
         .graph-node__text {
           padding-top: 30px;
         }
@@ -103,21 +204,19 @@ $color-regular: var(--el-text-color-regular);
         padding-top: 20px;
         width: 66px;
         height: 66px;
-        border: 1px solid #A7B0B9 !important; // 该class并未使用到
+        border: 1px solid #A7B0B9 !important;
         box-shadow: none;
 
         // 覆盖自带的node点击效果
         &.rel-node-checked {
-          box-shadow: 0 0 0 5px rgba(151, 151, 151, 0.21);
+          box-shadow: 0 0 0 5px rgba(151,151,151,0.21);
           animation: none;
-          border-color: $color-regular !important;
+          border-color: #778391 !important;
         }
-
         i {
           font-size: 24px;
-          color: $color-regular;
+          color: #778391;
         }
-
         .graph-node__text {
           padding-top: 24px;
         }
@@ -131,22 +230,19 @@ $color-regular: var(--el-text-color-regular);
 
         &.graph-node--ip {
           i {
-            color: var(--el-color-success);
+            color: #7E9F54;
           }
         }
-
         &.graph-node--domain {
           i {
-            color: $color-business;
+            color: #38ACD2;
           }
         }
-
         &.graph-node--app {
           i {
-            color: var(--el-color-warning);
+            color: #E5A219;
           }
         }
-
         i {
           font-size: 21px;
         }
@@ -159,7 +255,6 @@ $color-regular: var(--el-text-color-regular);
       left: unset !important;
       right: 0 !important;
     }
-
     .entity-graph__detail {
       height: calc(100% - 100px) !important;
       top: 100px !important;
@@ -170,7 +265,7 @@ $color-regular: var(--el-text-color-regular);
   }
 
   .g6-component-tooltip {
-    box-shadow: -1px 1px 10px -1px rgba(205, 205, 205, 0.85);
+    box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
 
     .primary-node-tooltip {
       padding: 5px;
@@ -180,21 +275,19 @@ $color-regular: var(--el-text-color-regular);
         align-items: center;
 
         i {
-          color: $color-regular;
+          color: #717171;
           font-size: 14px;
         }
-
         .tooltip__title {
           padding-left: 6px;
           font-size: 15px;
           line-height: 15px;
-          color: $color-primary;
+          color: #111;
         }
       }
-
       .tooltip__content {
         padding-top: 10px;
-        color: $color-primary;
+        color: #222;
         font-size: 12px;
 
         span:first-of-type {
@@ -202,7 +295,6 @@ $color-regular: var(--el-text-color-regular);
         }
       }
     }
-
     .entity-node-tooltip {
       width: 300px;
       padding: 5px;
@@ -215,7 +307,7 @@ $color-regular: var(--el-text-color-regular);
         .tooltip__title {
           font-size: 15px;
           line-height: 15px;
-          color: $color-primary;
+          color: #111;
         }
       }
 
@@ -230,12 +322,11 @@ $color-regular: var(--el-text-color-regular);
           .header-icon {
             width: 3px !important;
             height: 12px !important;
-            background: $color-business;
+            background: #38ACD2;
             border-radius: 1px;
             margin-right: 6px;
           }
         }
-
         .content-tag-list {
           display: flex;
           align-items: flex-start;
@@ -249,25 +340,22 @@ $color-regular: var(--el-text-color-regular);
             border: 1px solid;
             border-radius: 2px;
 
-            $normal-color: $color-regular;
-            $normal-light-color: var(--el-fill-color-light);
-            $negative-color: var(--el-color-danger);
-            $negative-light-color: var(--el-color-danger-light-9);
-            $positive-color: var(--el-color-success);
-            $positive-light-color: var(--el-color-success-light-9);
-
+            $normal-color: #778391;
+            $normal-light-color: #F7F8F9;
+            $negative-color: #E26154;
+            $negative-light-color: #FEF6F5;
+            $positive-color: #749F4D;
+            $positive-light-color: #F7FAF5;
             &.entity-tag--level-two-normal {
               border-color: $normal-color;
               color: $normal-color;
               background-color: $normal-light-color;
             }
-
             &.entity-tag--level-two-negative {
               border-color: $negative-color;
               color: $negative-color;
               background-color: $negative-light-color;
             }
-
             &.entity-tag--level-two-positive {
               border-color: $positive-color;
               color: $positive-color;
diff --git a/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss b/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss
index ed895195..5724b61a 100644
--- a/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss
+++ b/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss
@@ -19,7 +19,7 @@ $color-regular: var(--el-text-color-regular);
 
     .graph-list-header-icon {
       font-size: 21px;
-      color: $color-regular;
+      color: #778391;
       margin-right: 9px;
     }
   }
@@ -50,13 +50,10 @@ $color-regular: var(--el-text-color-regular);
     border-radius: 3px;
     font-size: 12px;
     color: var(--el-color-white);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 500;
-    padding: 14px 10px;
+    padding: 8px 10px;
     cursor: pointer;
-    border: 1px solid rgba(46, 136, 166, 0.85);
+    border: 1px solid var(--el-color-business);
+    text-align: center;
 
     i {
       font-size: 16px;
diff --git a/src/views/entityExplorer/EntityGraph.vue b/src/views/entityExplorer/EntityGraph.vue
index cb18ab3e..a665d5f9 100644
--- a/src/views/entityExplorer/EntityGraph.vue
+++ b/src/views/entityExplorer/EntityGraph.vue
@@ -1,12 +1,10 @@
 <template>
   <div class="entity-graph">
-    <div class="entity-graph__chart" id="entityGraph">
-    </div>
+    <div class="entity-graph__chart" id="entityGraph" ></div>
     <div class="entity-graph__right-box">
       <el-drawer
           v-model="rightBox.show"
           direction="rtl"
-          custom-class="entity-graph__detail"
           class="entity-graph__detail"
           :close-on-click-modal="true"
           :modal="false"
@@ -32,6 +30,16 @@
       </el-drawer>
     </div>
   </div>
+  <div id="toolbarContainer" class="graph-toolbar" style="height:50px;">
+    <ul class="toolbar__tools">
+      <li @click="handleToolsbarClick('zoomOut')" :title="$t('overall.zoomOut')"><i class="cn-icon cn-icon-zoom-out"></i></li>
+      <li @click="handleToolsbarClick('zoomIn')" :title="$t('overall.zoomIn')"><i class="cn-icon cn-icon-zoom-in"></i></li>
+      <li @click="handleToolsbarClick('autoZoom')" :title="$t('overall.autoZoom')"><i class="cn-icon cn-icon-reset"></i></li>
+      <li @click="handleToolsbarClick('undo')" :title="$t('overall.preStep')" id="preStep" class="toolbar--unactivated"><i class="cn-icon cn-icon-pre-step"></i></li>
+      <li @click="handleToolsbarClick('redo')" :title="$t('overall.nextStep')" id="nextStep" class="toolbar--unactivated"><i class="cn-icon cn-icon-next-step"></i></li>
+      <li @click="handleToolsbarClick('toDefault')" :title="$t('overall.reset')"><i class="cn-icon cn-icon-to-default"></i></li>
+    </ul>
+  </div>
 </template>
 
 <script>
@@ -39,10 +47,13 @@ import GraphEntityList from '@/views/entityExplorer/entityGraph/GraphEntityList'
 import GraphEntityDetail from '@/views/entityExplorer/entityGraph/GraphEntityDetail'
 import { useRoute } from 'vue-router'
 import { ref, shallowRef } from 'vue'
+import ForceGraph from 'force-graph'
+import { Algorithm } from '@antv/g6'
+import * as d3 from 'd3'
+import Node, { nodeType } from './entityGraph/node'
+import Link, { linkType, linkDistance } from './entityGraph/link'
+import { builtTooltip } from '@/views/entityExplorer/entityGraph/utils'
 import _ from 'lodash'
-import G6, { Algorithm } from '@antv/g6'
-import Node, { nodeType, queryRelatedEntity } from './entityGraph/node'
-import Edge from './entityGraph/edge'
 
 export default {
   name: 'EntityRelationship',
@@ -53,973 +64,995 @@ export default {
   data () {
     return {
       debounceFunc: null,
-      chartOption: {
-        container: 'entityGraph',
-        layout: {
-          type: 'force',
-          preventOverlap: true,
-          linkDistance: (d) => {
-            if (d.target.type === nodeType.rootNode || d.target.type === nodeType.listNode) {
-              return 200
-            }
-            return 80
-          },
-          nodeStrength: (d) => {
-            if (d.type === nodeType.rootNode || d.type === nodeType.listNode) {
-              return -100
-            } else if (d.type === nodeType.tempNode) {
-              return -300
-            }
-            return -10
-          },
-          edgeStrength: (d) => {
-            if (d.target.type === nodeType.rootNode || d.target.type === nodeType.listNode) {
-              return 0.1
-            }
-            return 0.7
-          }
-        },
-        modes: {
-          default: ['drag-canvas', 'drag-nodes', 'click-select', 'zoom-canvas']
-        }
-      },
+      center: {},
+      initialData: null, // 初始化数据，用于重置
+      nodes: [],
+      links: [],
+      graph: shallowRef(null),
+      defaultChargeStrength: -50, // 之前的设置-20
+      defaultLinkDistance: 80,
+      defaultMargin: 2, // 图像与箭头的距离
+      rootNode: null,
+      isClicking: false,
       /* 自己实现stack操作 */
       stackData: {
         undo: [], // 后退
         justUndo: false, // 是否刚后退了
         redo: [], // 前进
         justRedo: false // 是否刚前进了
-      },
-      center: {},
-      initialData: null // 初始化数据，用于重置
+      }
     }
   },
   methods: {
     async init () {
-      this.registerElements() // 注册自定义node
-      const tooltip = this.buildTooltip() // tooltip组件
-      const toolbar = this.buildToolbar() // 工具栏组装件
-      this.chartOption.plugins = [tooltip, toolbar] // 注册组件
-      this.graph = new G6.Graph(this.chartOption)
       try {
-        const initialData = await this.generateInitialData() // 备份初始数据
+        const initialData = await this.generateInitialData()
         this.initialData = _.cloneDeep(initialData) // 初始化数据
-        this.graph.data(initialData)
-        this.graph.render()
-        await this.$nextTick(() => {
-          const { x, y } = this.graph.getViewPortCenterPoint()
-          this.center = { x, y }
-        })
-        const rootNode = this.graph.findById(this.entity.entityName)
-        this.bindEvents() // 绑定事件
-        this.graph.emit('node:click', { item: rootNode, target: rootNode.getKeyShape() }) // 手动触发rootNode的点击事件
+        let hoverNode = null
+        let canvasHeight = document.body.clientHeight - 100
+        this.graph = ForceGraph()(document.getElementById('entityGraph'))
+          .height(canvasHeight)
+          .graphData(initialData)
+          .nodeCanvasObject((node, ctx) => {
+            /*
+            * 共有4种 nodeType，3种 entityType
+            * */
+            const nodeStyle = this.getNodeStyle(node.type, node.data.entityType)
+            switch (node.type) {
+              case nodeType.rootNode: {
+                // 如果是鼠标点击高亮的，最外层加上第三层圆环
+                if (node.id === this.clickNode.id) {
+                  ctx.beginPath()
+                  ctx.arc(node.x, node.y, nodeStyle.selectedShadowR, 0, 2 * Math.PI, false)
+                  ctx.closePath()
+                  ctx.fillStyle = nodeStyle.selectedShadowColor
+                  ctx.fill()
+                }
+
+                // 第二层圆环
+                ctx.beginPath()
+                ctx.arc(node.x, node.y, nodeStyle.shadowR, 0, 2 * Math.PI, false)
+                ctx.closePath()
+                ctx.fillStyle = node === this.clickNode || node === hoverNode ?
+                    nodeStyle.hoveredShadowColor :
+                    nodeStyle.shadowColor
+                ctx.fill()
+                // 内部挖空
+                ctx.beginPath()
+                ctx.arc(node.x, node.y, nodeStyle.innerR, 0, 2 * Math.PI, false)
+                ctx.closePath()
+                ctx.fillStyle = nodeStyle.fillStyle
+                ctx.fill()
+
+                // 第一层圆环
+                ctx.beginPath()
+                ctx.arc(node.x, node.y, nodeStyle.innerR, 0, 2 * Math.PI, false)
+                ctx.closePath()
+                ctx.lineWidth = 1
+                ctx.strokeStyle = nodeStyle.borderColor
+                ctx.stroke()
+                // 图片
+                ctx.drawImage(node.img, node.x - nodeStyle.iconWidth / 2, node.y - nodeStyle.iconHeight / 2, nodeStyle.iconWidth, nodeStyle.iconHeight);
+                // 文字
+                ctx.font = nodeStyle.font
+                const textWidth = ctx.measureText(node.label).width
+                const bckgDimensions = [textWidth, 9].map(n => n + 9 * 0.2)
+                ctx.fillStyle = nodeStyle.fontBgColor
+                ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2 + 31, ...bckgDimensions) // 文字的白底
+
+                ctx.textAlign = 'center'
+                ctx.textBaseline = 'middle'
+                ctx.fillStyle = nodeStyle.fontColor
+                ctx.fillText(node.label, node.x, node.y + 30)
+                break
+              }
+              case nodeType.listNode: {
+                // 如果是鼠标点击或者悬停的，有一层圆环
+                if (node === this.clickNode || node === hoverNode) {
+                  ctx.beginPath()
+                  ctx.arc(node.x, node.y, nodeStyle.shadowR, 0, 2 * Math.PI, false)
+                  ctx.closePath()
+                  if (node === this.currentSelectedNode) {
+                    ctx.fillStyle = nodeStyle.selectedShadowColor
+                  } else {
+                    ctx.fillStyle = nodeStyle.hoveredShadowColor
+                  }
+                  ctx.fill()
+                }
+
+                // 内部填白
+                ctx.beginPath()
+                ctx.arc(node.x, node.y, nodeStyle.innerR, 0, 2 * Math.PI, false)
+                ctx.closePath()
+                ctx.fillStyle = nodeStyle.fillStyle
+                ctx.fill()
+
+                // 第一层圆环
+                ctx.beginPath()
+                ctx.arc(node.x, node.y, nodeStyle.innerR, 0, 2 * Math.PI, false)
+                ctx.closePath()
+                ctx.lineWidth = 1
+                ctx.strokeStyle = nodeStyle.borderColor
+                ctx.stroke()
+                // 图片
+                ctx.drawImage(node.img, node.x - nodeStyle.iconWidth / 2, node.y - nodeStyle.iconHeight / 2, nodeStyle.iconWidth, nodeStyle.iconHeight)
+                // 文字
+                ctx.font = nodeStyle.font
+                const textWidth = ctx.measureText(node.label).width
+                const bckgDimensions = [textWidth, 8].map(n => n + 8 * 0.2)
+                ctx.fillStyle = nodeStyle.fontBgColor
+                ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2 + 24, ...bckgDimensions) // 文字的白底
+
+                ctx.textAlign = 'center'
+                ctx.textBaseline = 'middle'
+                ctx.fillStyle = nodeStyle.fontColor
+                ctx.fillText(node.label, node.x, node.y + 24)
+                break
+              }
+              case nodeType.entityNode: {
+                // 先画个白底圆环，避免 link 穿过不好看
+                ctx.beginPath()
+                ctx.arc(node.x, node.y, nodeStyle.innerR, 0, 2 * Math.PI, false)
+                ctx.closePath()
+                ctx.fillStyle = nodeStyle.fillStyle
+                ctx.fill()
+                // 如果是鼠标点击或者悬停的，有一层圆环
+                if (node === this.clickNode || node === hoverNode) {
+                  ctx.beginPath()
+                  ctx.arc(node.x, node.y, nodeStyle.shadowR, 0, 2 * Math.PI, false)
+                  ctx.closePath()
+                  if (node === this.clickNode) {
+                    ctx.fillStyle = nodeStyle.selectedShadowColor
+                  } else {
+                    ctx.fillStyle = nodeStyle.hoveredShadowColor
+                  }
+                  ctx.fill()
+                }
+                // 图片
+                ctx.drawImage(node.img, node.x - nodeStyle.iconWidth / 2, node.y - nodeStyle.iconHeight / 2, nodeStyle.iconWidth, nodeStyle.iconHeight)
+                break
+              }
+              case nodeType.tempNode: {
+                // 先画个白底圆环，避免 link 穿过不好看
+                ctx.beginPath()
+                ctx.arc(node.x, node.y, nodeStyle.innerR, 0, 2 * Math.PI, false)
+                ctx.closePath()
+                ctx.fillStyle = nodeStyle.fillStyle
+                ctx.fill()
+                // 画透明度0.7的图标
+                ctx.globalAlpha = 0.7
+                ctx.drawImage(node.img, node.x - nodeStyle.iconWidth / 2, node.y - nodeStyle.iconHeight / 2, nodeStyle.iconWidth, nodeStyle.iconHeight)
+                ctx.globalAlpha = 1
+                break
+              }
+            }
+          })
+          .linkCanvasObject((link, ctx) => {
+            const start = link.source
+            const end = link.target
+            const width = 1 // 线宽
+            const arrowSize = 3 // 箭头大小
+            const shortenedLength = 20 // link 末端缩短长度
+
+            // 计算箭头角度
+            const dx = end.x - start.x
+            const dy = end.y - start.y
+            const angle = Math.atan2(dy, dx) // 计算与x轴的角度（弧度）
+            const lineEndX = end.x - shortenedLength * Math.cos(angle)
+            const lineEndY = end.y - shortenedLength * Math.sin(angle)
+            const arrowEndX = lineEndX + arrowSize * Math.cos(angle)
+            const arrowEndY = lineEndY + arrowSize * Math.sin(angle)
+
+            // 绘制线
+            let color
+            ctx.beginPath()
+            if (link.type === linkType.temp) {
+              ctx.setLineDash([2, 2])
+              color = 'rgba(119,131,145,0.2)' // 虚线颜色
+            } else {
+              ctx.setLineDash([])
+              if (this.clickNode.id === link.source.id || this.clickNode.id === link.target.id) {
+                color = 'rgba(119,131,145,0.8)' // 高亮线颜色
+              } else {
+                color = 'rgba(119,131,145,0.3)' // 普通线颜色
+              }
+            }
+            ctx.moveTo(start.x, start.y)
+            ctx.lineTo(lineEndX, lineEndY)
+            ctx.strokeStyle = color
+            ctx.lineWidth = width
+            ctx.stroke()
+
+            // 绘制箭头
+            ctx.save() // 保存当前状态以便之后恢复
+            ctx.translate(arrowEndX, arrowEndY) // 将坐标原点移动到箭头末端
+            ctx.rotate(angle) // 根据链接方向旋转坐标系
+            ctx.beginPath()
+            ctx.moveTo(0, 0)
+            ctx.lineTo(-arrowSize, arrowSize) // 绘制箭头的一边
+            ctx.lineTo(-arrowSize, -arrowSize) // 绘制箭头的另一边
+            ctx.closePath()
+            ctx.fillStyle = color
+            ctx.fill()
+            ctx.restore() // 恢复之前保存的状态
+            /*if (link.source.x !== undefined && link.source.y !== undefined && link.target.x !== undefined && link.target.y !== undefined) {
+              const nodeStyle = this.getNodeStyle(link.target.type, link.target.data.entityType)
+
+              ctx.lineWidth = 0.5
+              ctx.beginPath()
+              if (this.clickNode && (this.clickNode.id === link.source.id || this.clickNode.id === link.target.id)) {
+                ctx.strokeStyle = link.clickColor
+              } else {
+                ctx.strokeStyle = link.color
+              }
+
+              const lineDash = link.target.type === nodeType.tempNode ? [2, 2] : []
+              ctx.setLineDash(lineDash)
+              ctx.moveTo(link.source.x, link.source.y)
+              const xy = this.findCircleLineIntersection(link.target.x, link.target.y, nodeStyle.innerR / 2, link.source.x, link.source.y)
+              ctx.lineTo(xy[0].x, xy[0].y)
+              this.drawArrow(ctx, link.source.x, link.source.y, xy[0].x, xy[0].y, 40, 3)
+
+              // 圆角三角形
+              if (this.clickNode && (this.clickNode.id === link.source.id || this.clickNode.id === link.target.id)) {
+                ctx.fillStyle = link.clickColor
+              } else {
+                ctx.fillStyle = link.color
+              }
+
+              ctx.fill()
+              ctx.closePath()
+              ctx.stroke()
+            }*/
+          })
+          .autoPauseRedraw(false) // keep redrawing after engine has stopped如果您有依赖于画布的不断重绘的自定义动态对象，建议关闭此选项。
+          .onNodeHover(node => {
+            hoverNode = node || null
+            if (node) {
+              node.name = builtTooltip(node)
+            }
+          })
+          .centerAt(0, 0)// 设置中心节点位置
+          .zoom(0.9999)
+          .onNodeClick(async (node, e) => {
+            this.isClicking = true
+            this.clickNode = node || null
+            if (node.type !== 'tempNode') {
+              this.rightBox.show = true
+              this.cleanTempItems()
+              // 点击entityNode，查询数据，并根据数据生成tempNode
+              if (node.type === nodeType.entityNode) {
+                node.fx = node.x
+                node.fy = node.y
+                this.rightBox.loading = true
+                try {
+                  // 若已查过数据，不重复查询
+                  if (!node.data.relatedEntities) {
+                    await node.queryDetailData()
+                  }
+                  const toAddNodes = []
+                  const toAddLinks = []
+                  let keyCount = Object.keys(node.data.relatedEntities).length
+                  Object.keys(node.data.relatedEntities).forEach((k,i) => {
+                    if (node.data.relatedEntities[k].total) {
+                      // 若已有同级同类型的listNode，不生成此tempNode
+                      const neighbors = node.getNeighbors(this.graph.graphData())
+                      const hasListNode = neighbors.nodes.some(b => b.data.entityType === k)
+                      if (!hasListNode) {
+                        const tempNode = new Node(
+                          nodeType.tempNode,
+                              `${node.realId}__${k}__temp`,
+                              {
+                                entityType: k,
+                                ...this.generateTempNodeCoordinate(node.getSourceNode(this.graph.graphData()), e)
+                              },
+                              node,
+                              this.getIconUrl(k, false, false)
+                        )
+                        //临时节点的初始固定坐标为其对应的entity节点坐标，展示直线动画
+                        //tempNode.fx = node.x
+                        //tempNode.fy = node.y
+                        let tempNodePoint = this.pointOfRotate({x:node.sourceNode.x,y:node.sourceNode.y},{x:node.x,y:node.y},this.getTempNodeAngle(keyCount,i))//临时节点固定角度，为以entity节点为center，list节点为from，旋转到临时节点的角度
+                        let finalTempNodePoint = this.pointOfLine({x:node.x,y:node.y},tempNodePoint,this.defaultLinkDistance)//start,end,lineLength
+                        if(tempNodePoint.x && tempNodePoint.y) {
+                          tempNode.fx = (node.x + finalTempNodePoint.x) / 2
+                          tempNode.fy = (node.y + finalTempNodePoint.y) / 2
+                        }
+
+                        const tempLink = new Link(node, tempNode, linkType.temp)
+                        toAddNodes.push(tempNode)
+                        toAddLinks.push(tempLink)
+                      }
+                    }
+                  })
+                  if (toAddNodes.length || toAddLinks.length) {
+                    this.addItems(toAddNodes, toAddLinks, false)
+                  }
+                  this.rightBox.node = node
+                  this.rightBox.mode = 'detail'
+                } catch (e) {
+                  console.error(e)
+                  this.$message.error(this.errorMsgHandler(e))
+                } finally {
+                  this.rightBox.loading = false
+                }
+              } else if (node.type === nodeType.listNode) {
+                this.rightBox.node = node
+                this.rightBox.mode = 'list'
+              } else if (node.type === nodeType.rootNode) {
+                this.rightBox.node = node
+                this.rightBox.mode = 'detail'
+              }
+            } else {
+              // 点击tempNode，根据source生成listNode和entityNode以及对应的edge。查完entityNode的接口再删除临时node和edge。
+              // 若已达第六层，则只生成listNode，不再展开entityNode
+              const nodes = []
+              const links = []
+              let stackNodes = []
+              const stackLinks = []
+              const sourceNode = node.getSourceNode(this.graph.graphData())
+              const k1 = (node.x - sourceNode.x) / linkDistance.normal
+              const k2 = (node.y - sourceNode.y) / linkDistance.normal
+              const listNode = new Node(
+                    nodeType.listNode,
+                    `${sourceNode.realId}__${node.data.entityType}-list`,
+                    {
+                      entityType: node.data.entityType,
+                      fx: sourceNode.x + k1 * linkDistance.entityToList,
+                      fy: sourceNode.y + k2 * linkDistance.entityToList,
+                    },
+                    sourceNode,
+                    this.getIconUrl(node.data.entityType, false, false)
+              )
+              nodes.push(listNode)
+              links.push(new Link(sourceNode, listNode))
+              stackNodes.push(_.cloneDeep(listNode))
+              stackLinks.push(_.cloneDeep(links[0]))
+              this.addItems(nodes, links, false)
+              this.cleanTempItems()
+              this.clickNode = listNode
+              this.rightBox.mode = 'list'
+
+              setTimeout(async () => {
+                // 判断listNode的sourceNode层级，若大于等于10（即第6层listNode），则不继续拓展entity node，并给用户提示。否则拓展entity node
+                const level = this.getNodeLevel(listNode.sourceNode.id)
+                if (level < 10) {
+                  this.rightBox.loading = true
+                  nodes.splice(0, nodes.length)
+                  links.splice(0, links.length)
+                  try {
+                    const entities = await sourceNode.queryRelatedEntities(listNode.data.entityType)
+                    sourceNode.data.relatedEntities[listNode.data.entityType].list.push(...entities.list)
+                    let curNodes = this.graph.graphData().nodes
+                    entities.list.forEach(entity => {
+                      const entityNode = new Node(nodeType.entityNode, entity.vertex, {
+                        entityType: listNode.data.entityType,
+                        entityName: entity.vertex,
+                        x: listNode.x + Math.random() * 10 - 5,
+                        y: listNode.y + Math.random() * 10 - 5
+                      }, listNode, this.getIconUrl(listNode.data.entityType, false, false))
+                      nodes.push(entityNode)
+                      let link = new Link(listNode, entityNode)
+                      links.push(link)
+                      if(curNodes.findIndex(node => node.id === entityNode.id) === -1) {//过滤掉已有的节点
+                        stackNodes.push(_.cloneDeep(entityNode))
+                      }
+                      stackLinks.push(_.cloneDeep(link))
+                    })
+                    this.addItems(nodes, links, false)
+                    //由于点击临时节点后增加节点分为了2步，所以需要将2步的所有节点一起缓存
+                    this.stackData.undo.push({nodes:stackNodes, links:stackLinks})
+
+                    setTimeout(() => {
+                      listNode.fx = null
+                      listNode.fy = null
+                      this.rightBox.node = _.cloneDeep(listNode)
+                    }, 100)
+                  } catch (e) {
+                    console.error(e)
+                    this.$message.error(this.errorMsgHandler(e))
+                  } finally {
+                    this.rightBox.loading = false
+                  }
+                } else {
+                  this.$message.warning(this.$t('tip.maxExpandDepth'))
+                }
+                if (this.stackData.justUndo) {
+                  this.stackData.justUndo = false
+                  this.stackData.redo = []
+                }
+                if (this.stackData.justRedo) {
+                  this.stackData.justRedo = false
+                  this.stackData.redo = []
+                }
+              }, 200)
+            }
+          })
+
+          .d3Force('link', d3.forceLink().id(link => link.id)
+            .distance(link => {
+              if (link.source.type === nodeType.rootNode) {
+                return linkDistance.root
+              } else if (link.source.type === nodeType.entityNode && link.target.type === nodeType.listNode) {
+                return linkDistance.entityToList
+              }
+              return linkDistance.normal
+            })
+            .strength(link => {
+              return link.strength
+            }))// 设置线对点的力？
+          .d3Force('center', d3.forceCenter().strength(0))// 设置力导图点阵中心位置, 向心力设置为0以后，d3.forceCenter(-50,-70)不起作用了
+          .d3Force('charge', d3.forceManyBody().strength(this.defaultChargeStrength))
+          .onNodeDrag((node, translate) => {
+            const { nodes, links } = this.graph.graphData()
+            //拖动entity节点时，如果此entity节点有临时节点，则同时移动临时节点
+            if(node.type === nodeType.entityNode) {
+              //查询点击entity节点对应的list节点
+              let fromX = node.sourceNode.preDragX ? node.sourceNode.preDragX : node.sourceNode.x
+              let fromY = node.sourceNode.preDragY ? node.sourceNode.preDragY : node.sourceNode.y
+              let from = {x:fromX,y:fromY}
+              let centerX = node.preDragX ? node.preDragX : node.x
+              let centerY = node.preDragY ? node.preDragY : node.y
+              let center = {x:centerX,y:centerY}
+
+              const tempLinks = links.filter(link => link.source.id === node.id && link.type === linkType.temp)
+              tempLinks.forEach(link => {
+                const tempNodeGroup = nodes.filter(node => node.id === link.target.id)
+                tempNodeGroup.forEach(tempNode => {
+                  let toX = tempNode.fx ? tempNode.fx : tempNode.x
+                  let toY = tempNode.fy ? tempNode.fy : tempNode.y
+                  let to = {x:toX,y:toY}
+                  if(!tempNode.angle) {//每次拖拽，每个临时节点计算一次角度即可，因为角度不会发生改变
+                    tempNode.angle = this.angleOfRotate(from,to,center)
+                  }
+
+                  let toPoint = this.pointOfRotate({x: node.sourceNode.x, y: node.sourceNode.y}, {x:node.x + translate.x ,y:node.y + translate.y}, tempNode.angle)
+                  //因为在拖拽的过长中，list节点到entity节点之间的距离是变化的，且我们要求的是，临时节点到entity节点之间的距离不发生变化，所以此处需要再次进行计算转换，得到最终的坐标
+                  //已知2个点的坐标，求从起点开始指定长度线段的终点坐标
+                  if(!tempNode.lineLength) {//每次拖拽，每个临时节点计算一次与实体节点的距离即可，因为距离在当前拖拽中不会发生改变
+                    tempNode.lineLength = Math.sqrt(Math.pow(node.x - tempNode.fx,2) + Math.pow(node.y - tempNode.fy,2))
+                  }
+                  let finalTo = this.pointOfLine({x:node.x + translate.x ,y:node.y + translate.y},toPoint,tempNode.lineLength)
+                  tempNode.fx = finalTo.x
+                  tempNode.fy = finalTo.y
+                })
+              })
+            }
+
+            //拖动list节点时，如果此list节点对应的entity节点有临时节点，则同时移动临时节点
+            if(node.type === nodeType.listNode) {
+              //根据list节点，找到list节点连接的线
+              const listLinks = links.filter(link => link.source.id === node.id)
+              let fromX = node.preDragX ? node.preDragX : node.x
+              let fromY = node.preDragY ? node.preDragY : node.y
+              listLinks.forEach(link => {
+                //找到连接临时节点的虚线
+                const tempLinks = links.filter(entityLink => entityLink.source.id === link.target.id && entityLink.type === linkType.temp)
+                if(tempLinks && tempLinks.length > 0) {
+                  tempLinks.forEach(tempLink => {
+                    //找到entity节点
+                    const entityNode = nodes.find(normalNode => normalNode.id === tempLink.source.id && normalNode.type === nodeType.entityNode)
+                    if(entityNode) {
+                      let entityNodeX = entityNode.fx ? entityNode.fx : entityNode.x
+                      let entityNodeY = entityNode.fy ? entityNode.fy : entityNode.y
+                      let angle = this.angleOfRotate({x:fromX,y:fromY},{x:node.x + translate.x,y:node.y + translate.y},{x:entityNodeX,y:entityNodeY})
+                      const tempNodes = nodes.filter(normalNode => normalNode.id === tempLink.target.id && normalNode.type === nodeType.tempNode)//找到临时节点
+                      tempNodes.forEach(tempNode => {
+                        let tempNodeX = tempNode.fx ? tempNode.fx : tempNode.x
+                        let tempNodeY = tempNode.fy ? tempNode.fy : tempNode.y
+                        let sourceNodeX = tempLink.source.fx ? tempLink.source.fx : tempLink.source.x
+                        let sourceNodeY = tempLink.source.fy ? tempLink.source.fy : tempLink.source.y
+                        //rotate为list节点旋转的角度，根据旋转角度，及临时节点的位置，及entity节点的坐标，得到临时节点旋转后的坐标
+                        let to = this.pointOfRotate({x:tempNodeX, y:tempNodeY}, {x:sourceNodeX,y:sourceNodeY}, angle)
+                        tempNode.fx = to.x
+                        tempNode.fy = to.y
+                      })
+                    }
+                  })
+                }
+              })
+            }
+            //记录上次拖拽时节点的坐标，否则计算时出现误差。
+            node.preDragX = node.x + translate.x
+            node.preDragY = node.y + translate.y
+          })
+          .cooldownTime(2000)//到时间后，才执行onEngineStop
+          .onNodeDragEnd((node, translate) => { // 修复拖动节点
+            node.fx = node.x
+            node.fy = node.y
+            //拖拽结束时，把所有临时节点的的angle置为null,便于拖动其它节点时的计算
+            this.graph.graphData().nodes.forEach(node => {
+              if(node.type === nodeType.tempNode) {
+                node.angle = null
+                node.lineLength = null
+              }
+            })
+          })
+          .onEngineTick(() => {
+            if(this.isClicking) {
+              const tempNodeGroup = this.graph.graphData().nodes.filter(node => node.type === nodeType.tempNode)
+              if(tempNodeGroup.length > 0) {
+                let keyCount = tempNodeGroup.length
+                tempNodeGroup.forEach((tempNode,i) => {
+                  let tempNodeSource = tempNode.sourceNode
+                  if(tempNodeSource) {
+                    let tempNodePoint = this.pointOfRotate({x:tempNodeSource.sourceNode.x,y:tempNodeSource.sourceNode.y},{x:tempNodeSource.x,y:tempNodeSource.y},this.getTempNodeAngle(keyCount,i))//临时节点固定角度，为以entity节点为center，list节点为from，旋转到临时节点的角度
+                    let finalTempNodePoint = this.pointOfLine({x:tempNodeSource.x,y:tempNodeSource.y},tempNodePoint,this.defaultLinkDistance)//start,end,lineLength
+                    if(tempNodePoint.x && tempNodePoint.y) {
+                      tempNode.fx = finalTempNodePoint.x
+                      tempNode.fy = finalTempNodePoint.y
+                    }
+                  }
+                })
+                this.isClicking = false
+              }
+            }
+          })
       } catch (e) {
+        console.error(e)
         this.$message.error(this.errorMsgHandler(e))
       } finally {
         this.rightBox.loading = false
       }
     },
-    registerElements () {
-      const _this = this
-      G6.registerNode(
-        nodeType.rootNode,
-        {
-          draw (cfg, group) {
-            group.addShape('circle', {
-              name: 'rootSelectedShadow',
-              attrs: {
-                r: 25, // selected时38.5
-                fill: getRootNodeStyle(cfg.myData.entityType).selectedShadowColor
-              }
-            })
-            group.addShape('circle', {
-              name: 'rootShadow',
-              attrs: {
-                r: 31.5,
-                fill: getRootNodeStyle(cfg.myData.entityType).shadowColor
-              }
-            })
-            const node = group.addShape('circle', {
-              name: 'rootInner',
-              attrs: {
-                r: 26,
-                fx: cfg.fx,
-                fy: cfg.fy,
-                fill: '#FFFFFF',
-                stroke: getRootNodeStyle(cfg.myData.entityType).borderColor,
-                lineWidth: 1
-              }
-            })
-            group.addShape('image', {
-              attrs: {
-                x: -getRootNodeStyle(cfg.myData.entityType).iconWidth / 2,
-                y: -getRootNodeStyle(cfg.myData.entityType).iconHeight / 2,
-                height: getRootNodeStyle(cfg.myData.entityType).iconHeight,
-                width: getRootNodeStyle(cfg.myData.entityType).iconWidth,
-                img: getIconUrl(cfg.myData.entityType, true, true)
-              },
-              name: 'rootIcon',
-              draggable: true
-            })
-            // 为label建一个box，避免鼠标事件中断
-            group.addShape('rect', {
-              name: 'rootLabelBox',
-              attrs: {
-                width: 64,
-                height: 40,
-                x: -32,
-                y: 10,
-                fill: 'transparent'
-              }
-            })
-            group.addShape('text', {
-              attrs: {
-                text: cfg.label,
-                x: 0,
-                y: 42,
-                fontSize: 12,
-                textAlign: 'center',
-                textBaseline: 'middle',
-                fill: '#353636'
-              },
-              name: 'rootLabel'
-            })
-            return node
-          },
-          setState (name, value, node) {
-            const group = node.getContainer()
-            const model = node.getModel()
-            const selectedShadowShape = group.get('children')[0]
-            const shadowShape = group.get('children')[1]
-            if (name === 'hover') {
-              // 鼠标悬浮时，若不处于selected状态，才继续处理
-              if (!node.hasState('mySelected')) {
-                // hover时，加深shadow的颜色
-                if (value) {
-                  shadowShape.attr('fill', getRootNodeStyle(model.myData.entityType).hoveredShadowColor)
-                } else {
-                  shadowShape.attr('fill', getRootNodeStyle(model.myData.entityType).shadowColor)
-                }
-              }
-            } else if (name === 'mySelected') {
-              // select事件，取消自身hover状态，取消其他node和edge的高亮状态，高亮自身和自身相关的edge
-              node.setState('hover', false)
-              // 变更样式
-              if (value) {
-                // 取消其他高亮
-                const nodes = _this.graph.getNodes()
-                const edges = _this.graph.getEdges()
-                nodes.forEach(n => {
-                  if (n.getModel().id !== node.getModel().id) {
-                    n.setState('mySelected', false)
-                  }
-                })
-                edges.forEach(n => {
-                  n.setState('mySelected', false)
-                })
-                // 高亮自身
-                shadowShape.attr('fill', getRootNodeStyle(model.myData.entityType).hoveredShadowColor)
-                selectedShadowShape.attr('r', 38.5)
-                // 高亮自身相关的edge
-                const aboutEdges = node.getEdges()
-                aboutEdges.forEach(n => {
-                  n.setState('mySelected', true)
-                })
-              } else {
-                shadowShape.attr('fill', getRootNodeStyle(model.myData.entityType).shadowColor)
-                selectedShadowShape.attr('r', 25)
-              }
-            }
-          }
-        },
-        'single-node'
-      )
-      G6.registerNode(
-        nodeType.listNode,
-        {
-          draw (cfg, group) {
-            group.addShape('circle', {
-              name: 'listShadow',
-              attrs: {
-                r: 20, // selected时26.5
-                x: 0,
-                y: 0,
-                fill: getListNodeStyle(cfg.myData.entityType).hoveredShadowColor
-              }
-            })
-            const node = group.addShape('circle', {
-              name: 'listInner',
-              attrs: {
-                r: 21,
-                fx: cfg.fx,
-                fy: cfg.fy,
-                fill: '#FFFFFF',
-                stroke: getListNodeStyle(cfg.myData.entityType).borderColor,
-                lineWidth: 1
-              }
-            })
-            group.addShape('image', {
-              attrs: {
-                x: -getListNodeStyle(cfg.myData.entityType).iconWidth / 2,
-                y: -getListNodeStyle(cfg.myData.entityType).iconHeight / 2,
-                height: getListNodeStyle(cfg.myData.entityType).iconHeight,
-                width: getListNodeStyle(cfg.myData.entityType).iconWidth,
-                img: getIconUrl(cfg.myData.entityType, false, false)
-              },
-              name: 'listIcon',
-              draggable: true
-            })
-            // 为label建一个box，避免鼠标事件中断
-            group.addShape('rect', {
-              name: 'rootLabelBox',
-              attrs: {
-                width: 46,
-                height: 30,
-                x: -23,
-                y: 12,
-                fill: 'transparent'
-              }
-            })
-            group.addShape('text', {
-              attrs: {
-                text: cfg.label,
-                x: 0,
-                y: 34,
-                fontSize: 12,
-                textAlign: 'center',
-                textBaseline: 'middle',
-                fill: '#353636'
-              },
-              name: 'listLabel'
-            })
-            return node
-          },
-          setState (name, value, node) {
-            const group = node.getContainer()
-            const model = node.getModel()
-            const shadowShape = group.get('children')[0]
-            const innerShape = group.get('children')[1]
-            if (name === 'hover') {
-              // 鼠标悬浮时，若不处于selected状态，才继续处理
-              if (!node.hasState('mySelected')) {
-                // hover时，出现shadow
-                shadowShape.attr('fill', getListNodeStyle(model.myData.entityType).hoveredShadowColor)
-                if (value) {
-                  shadowShape.attr('r', 26.5)
-                } else {
-                  shadowShape.attr('r', 20)
-                }
-              }
-            } else if (name === 'mySelected') {
-              // select事件，取消自身hover状态，取消其他node和edge的高亮状态，高亮自身和自身相关的edge
-              node.setState('hover', false)
-              if (value) {
-                // 取消其他高亮
-                const nodes = _this.graph.getNodes()
-                const edges = _this.graph.getEdges()
-                nodes.forEach(n => {
-                  if (n.getModel().id !== node.getModel().id) {
-                    n.setState('mySelected', false)
-                  }
-                })
-                edges.forEach(n => {
-                  n.setState('mySelected', false)
-                })
-                // 高亮自身
-                shadowShape.attr('fill', getListNodeStyle(model.myData.entityType).selectedShadowColor)
-                shadowShape.attr('r', 26.5)
-                innerShape.attr('stroke', getListNodeStyle(model.myData.entityType).selectedBorderColor)
-                // 高亮自身相关的edge
-                const aboutEdges = node.getEdges()
-                aboutEdges.forEach(n => {
-                  n.setState('mySelected', true)
-                })
-              } else {
-                shadowShape.attr('fill', getListNodeStyle(model.myData.entityType).hoveredShadowColor)
-                shadowShape.attr('r', 20)
-                innerShape.attr('stroke', getListNodeStyle(model.myData.entityType).borderColor)
-              }
-            }
-          }
-        },
-        'single-node'
-      )
-      G6.registerNode(
-        nodeType.entityNode,
-        {
-          draw (cfg, group) {
-            group.addShape('circle', {
-              name: 'entityShadow',
-              attrs: {
-                r: 18,
-                x: 0,
-                y: 0,
-                fill: 'transparent'
-              }
-            })
-            return group.addShape('image', {
-              attrs: {
-                x: -getEntityNodeStyle(cfg.myData.entityType).iconWidth / 2,
-                y: -getEntityNodeStyle(cfg.myData.entityType).iconHeight / 2,
-                height: getEntityNodeStyle(cfg.myData.entityType).iconHeight,
-                width: getEntityNodeStyle(cfg.myData.entityType).iconWidth,
-                img: getIconUrl(cfg.myData.entityType, true, false)
-              },
-              name: 'entityIcon'
-            })
-          },
-          setState (name, value, node) {
-            const group = node.getContainer()
-            const model = node.getModel()
-            const shadowShape = group.get('children')[0]
-            if (name === 'mySelected') {
-              // select事件，取消自身hover状态，取消其他node和edge的高亮状态，高亮自身和自身相关的edge
-              node.setState('hover', false)
-              if (value) {
-                // 取消其他高亮
-                const nodes = _this.graph.getNodes()
-                const edges = _this.graph.getEdges()
-                nodes.forEach(n => {
-                  if (n.getModel().id !== node.getModel().id) {
-                    n.setState('mySelected', false)
-                  }
-                })
-                edges.forEach(n => {
-                  n.setState('mySelected', false)
-                })
-                // 高亮自身
-                shadowShape.attr('fill', getEntityNodeStyle(model.myData.entityType).selectedShadowColor)
-                // 高亮自身相关的edge
-                const aboutEdges = node.getEdges()
-                aboutEdges.forEach(n => {
-                  n.setState('mySelected', true)
-                })
-              } else {
-                shadowShape.attr('fill', 'transparent')
-              }
-            }
-          }
-        },
-        'single-node'
-      )
-      G6.registerNode(
-        nodeType.tempNode,
-        {
-          draw (cfg, group) {
-            group.addShape('text', {
-              attrs: {
-                text: cfg.label,
-                x: 0,
-                y: 22,
-                fontSize: 12,
-                textAlign: 'center',
-                textBaseline: 'middle',
-                fill: '#353636',
-                opacity: 0.7
-              },
-              name: 'tempLabel'
-            })
-            return group.addShape('image', {
-              attrs: {
-                x: -getListNodeStyle(cfg.myData.entityType).iconWidth / 2,
-                y: -getListNodeStyle(cfg.myData.entityType).iconHeight / 2,
-                height: getListNodeStyle(cfg.myData.entityType).iconHeight,
-                width: getListNodeStyle(cfg.myData.entityType).iconWidth,
-                img: getIconUrl(cfg.myData.entityType, false, false),
-                opacity: 0.7
-              },
-              name: 'tempIcon'
-            })
-          },
-          setState (name, value, node) {
-            // 重写setState，避免鼠标事件导致重新加载图片
-          }
-        },
-        'single-node'
-      )
-      function getRootNodeStyle (entityType) {
-        switch (entityType) {
-          case 'ip': {
-            return {
-              iconWidth: 26,
-              iconHeight: 23,
-              borderColor: 'rgba(126,159,84,1)',
-              shadowColor: 'rgba(126,159,84,0.21)',
-              hoveredShadowColor: 'rgba(126,159,84,0.36)',
-              selectedShadowColor: 'rgba(126,159,84,0.1)'
-            }
-          }
-          case 'domain': {
-            return {
-              iconWidth: 28,
-              iconHeight: 24,
-              borderColor: 'rgba(56,172,210,1)',
-              shadowColor: 'rgba(56,172,210,0.21)',
-              hoveredShadowColor: 'rgba(56,172,210,0.36)',
-              selectedShadowColor: 'rgba(56,172,210,0.1)'
-            }
-          }
-          case 'app': {
-            return {
-              iconWidth: 24,
-              iconHeight: 26,
-              borderColor: 'rgba(229,162,25,1)',
-              shadowColor: 'rgba(229,162,25,0.21)',
-              hoveredShadowColor: 'rgba(229,162,25,0.36)',
-              selectedShadowColor: 'rgba(229,162,25,0.1)'
-            }
-          }
-        }
-        return {
-          iconWidth: 26,
-          iconHeight: 23,
-          borderColor: 'rgba(126,159,84,1)',
-          shadowColor: 'rgba(126,159,84,0.21)',
-          hoveredShadowColor: 'rgba(126,159,84,0.36)',
-          selectedShadowColor: 'rgba(126,159,84,0.1)'
-        }
-      }
-      function getListNodeStyle (entityType) {
-        switch (entityType) {
-          case 'ip': {
-            return {
-              iconWidth: 24,
-              iconHeight: 21,
-              borderColor: 'rgba(119,131,145,0.6)',
-              selectedBorderColor: 'rgba(126,159,84,1)',
-              hoveredShadowColor: 'rgba(151,151,151,0.21)',
-              selectedShadowColor: 'rgba(126,159,84,0.21)'
-            }
-          }
-          case 'domain': {
-            return {
-              iconWidth: 24,
-              iconHeight: 24,
-              borderColor: 'rgba(119,131,145,0.6)',
-              selectedBorderColor: 'rgba(56,172,210,1)',
-              hoveredShadowColor: 'rgba(151,151,151,0.21)',
-              selectedShadowColor: 'rgba(56,172,210,0.21)'
-            }
-          }
-          case 'app': {
-            return {
-              iconWidth: 22,
-              iconHeight: 24,
-              borderColor: 'rgba(119,131,145,0.6)',
-              selectedBorderColor: 'rgba(229,162,25,1)',
-              hoveredShadowColor: 'rgba(151,151,151,0.21)',
-              selectedShadowColor: 'rgba(229,162,25,0.21)'
-            }
-          }
-        }
-        return {
-          iconWidth: 24,
-          iconHeight: 21,
-          borderColor: 'rgba(119,131,145,0.6)',
-          selectedBorderColor: 'rgba(126,159,84,1)',
-          hoveredShadowColor: 'rgba(151,151,151,0.21)',
-          selectedShadowColor: 'rgba(126,159,84,0.21)'
-        }
-      }
-      function getEntityNodeStyle (entityType) {
-        switch (entityType) {
-          case 'ip': {
-            return {
-              iconWidth: 22,
-              iconHeight: 20,
-              selectedShadowColor: 'rgba(126,159,84,0.1)'
-            }
-          }
-          case 'domain': {
-            return {
-              iconWidth: 22,
-              iconHeight: 22,
-              selectedShadowColor: 'rgba(56,172,210,0.1)'
-            }
-          }
-          case 'app': {
-            return {
-              iconWidth: 21,
-              iconHeight: 24,
-              selectedShadowColor: 'rgba(229,162,25,0.1)'
-            }
-          }
-        }
-        return {
-          iconWidth: 22,
-          iconHeight: 20,
-          borderColor: 'rgba(119,131,145,1)',
-          selectedBorderColor: 'rgba(126,159,84,1)',
-          hoveredShadowColor: 'rgba(151,151,151,0.21)',
-          selectedShadowColor: 'rgba(126,159,84,0.1)'
-        }
-      }
-      function getIconUrl (entityType, colored, isRoot) {
-        let suffix
-        if (entityType === 'domain' && isRoot) {
-          suffix = '-colored2'
-        } else {
-          suffix = colored ? '-colored' : ''
-        }
-        return require(`@/assets/img/entity-symbol2/${entityType}${suffix}.svg`)
+    getTempNodeAngle(nodeCount,i) {
+      switch (nodeCount) {
+        case 1:
+          return 180
+        case 2:
+          return 150 + i*60
+        case 3:
+          return 150 + i*30
       }
     },
-    bindEvents () {
-      const _this = this
-      this.graph.on('node:dragstart', (e) => {
-        _this.graph.layout()
-        refreshDraggedNodePosition(e)
-      })
-      this.graph.on('node:drag', function (e) {
-        refreshDraggedNodePosition(e)
-      })
-      this.graph.on('node:dragend', function (e) {
-        e.item.get('model').fx = null
-        e.item.get('model').fy = null
-      })
-      this.graph.on('node:click', async function (e) {
-        const node = e.item
-        const nodeModel = node.get('model')
-        if (nodeModel.type !== 'tempNode') {
-          _this.rightBox.show = true
-          node.setState('mySelected', true)
-          _this.cleanTempNodesAndTempEdges()
-          // 点击entityNode，查询数据，并根据数据生成tempNode
-          if (nodeModel.type === nodeType.entityNode) {
-            _this.rightBox.loading = true
-            try {
-              // 若已查过数据，不重复查询
-              if (!nodeModel.myData.relatedEntity) {
-                await nodeModel.queryDetailData()
-              }
-              let change = false
-              Object.keys(nodeModel.myData.relatedEntity).forEach(k => {
-                if (nodeModel.myData.relatedEntity[k].total) {
-                  // 若已有同级同类型的listNode，不生成此tempNode
-                  const neighbors = _this.graph.getNeighbors(nodeModel.id, 'target')
-                  const hasListNode = neighbors.some(b => b.get('model').myData.entityType === k)
-                  if (!hasListNode) {
-                    change = true
-                    const tempNode = new Node(
-                      nodeType.tempNode,
-                      `${nodeModel.id}__${k}__temp`,
-                      {
-                        entityType: k,
-                        ...generateTempNodeCoordinate(nodeModel.sourceNode, e)
-                      },
-                      nodeModel
-                    )
-                    const tempEdge = new Edge(nodeModel, tempNode, 'temp')
-                    _this.graph.addItem('node', tempNode)
-                    _this.graph.addItem('edge', tempEdge)
-                  }
-                }
-              })
-              change && _this.graph.layout()
-              _this.rightBox.node = _.cloneDeep(nodeModel)
-              _this.rightBox.mode = 'detail'
-            } catch (e) {
-              _this.$message.error(_this.errorMsgHandler(e))
-            } finally {
-              _this.rightBox.loading = false
-            }
-          } else if (nodeModel.type === nodeType.listNode) {
-            _this.rightBox.node = _.cloneDeep(nodeModel)
-            _this.rightBox.mode = 'list'
-          } else if (nodeModel.type === nodeType.rootNode) {
-            _this.rightBox.node = _.cloneDeep(nodeModel)
-            _this.rightBox.mode = 'detail'
-          }
-        } else {
-          // 点击tempNode，根据source生成listNode和entityNode以及对应的edge。查完entityNode的接口再删除临时node和edge。
-          // 若已达第六层，则只生成listNode，不再展开entityNode
-          const nodes = []
-          const edges = []
-          const listNode = new Node(
-            nodeType.listNode,
-            `${nodeModel.sourceNode.id}__${nodeModel.myData.entityType}-list`,
-            {
-              entityType: nodeModel.myData.entityType,
-              x: nodeModel.x,
-              y: nodeModel.y
-            },
-            nodeModel.sourceNode
-          )
-          nodes.push(listNode)
-          edges.push(new Edge(nodeModel.sourceNode, listNode))
+    //根据3个点坐标，计算节点旋转的角度
+    angleOfRotate(from, to, center) {
+      let ab = {}
+      let ac = {}
+      ab.x = from.x - center.x
+      ab.y = from.y - center.y
+      ac.x = to.x - center.x
+      ac.y = to.y - center.y
+      let direct = (ab.x * ac.y) - (ab.y * ac.x)//求节点是顺时针还是逆时针旋转
+      let lengthAb = Math.sqrt(Math.pow(center.x - from.x,2) + Math.pow(center.y - from.y,2)),
+          lengthAc = Math.sqrt(Math.pow(center.x - to.x,2) + Math.pow(center.y - to.y,2)),
+          lengthBc = Math.sqrt(Math.pow(from.x - to.x,2) + Math.pow(from.y - to.y,2))
+      let cosA = (Math.pow(lengthAb,2) + Math.pow(lengthAc,2) - Math.pow(lengthBc,2)) / (2 * lengthAb * lengthAc)//余弦定理求出旋转角
+      let angleA = Math.acos(cosA) * 180 / Math.PI
+      if(direct < 0) {//负数表示逆时针旋转,正数表示顺时针旋转
+        angleA = -angleA
+      }
+      return angleA
+    },
+    // from: 圆上某点(初始点);
+    // center: 圆心点;
+    // angle: 旋转角度°  -- [angle * M_PI / 180]:将角度换算为弧度
+    // 【注意】angle 逆时针为正，顺时针为负
+    pointOfRotate(from,center,angle){
+      var a = center.x
+      var b = center.y
+      var x0 = from.x
+      var y0 = from.y
+      var rx = a + (x0-a) * Math.cos(angle * Math.PI / 180) - (y0-b) * Math.sin(angle * Math.PI / 180)
+      var ry = b + (x0-a) * Math.sin(angle * Math.PI / 180) + (y0-b) * Math.cos(angle * Math.PI / 180)
+      if(rx && ry) {
+        return {x:rx,y:ry}
+      } else {
+        return from
+      }
+    },
+    //已知2个点的坐标，求从起点开始指定长度线段的终点坐标
+    pointOfLine(start, end, lineLength) {
+      // 计算总距离
+      let totalDistance = Math.sqrt(Math.pow(end.x - start.x, 2) + Math.pow(end.y - start.y, 2))
+      let cosA = (end.x - start.x)/totalDistance
+      let sinA = (end.y - start.y) / totalDistance
+      let finalX = start.x + cosA * lineLength
+      let finalY = start.y + sinA * lineLength
 
-          // 判断listNode的sourceNode层级，若大于等于10（即第6层listNode），则不继续拓展entity node，并给用户提示。否则拓展entity node
-          const level = _this.getNodeLevel(listNode.sourceNode.id)
-          if (level < 10) {
-            _this.rightBox.loading = true
-            try {
-              const entities = await queryRelatedEntity(nodeModel.sourceNode, listNode.myData.entityType)
-              nodeModel.sourceNode.myData.relatedEntity[listNode.myData.entityType].list.push(...entities.list)
-              entities.list.forEach(entity => {
-                const entityNode = new Node(nodeType.entityNode, entity.vertex, {
-                  entityType: listNode.myData.entityType,
-                  entityName: entity.vertex,
-                  x: e.x + Math.random() * 100 - 50,
-                  y: e.y + Math.random() * 100 - 50
-                }, listNode)
-                nodes.push(entityNode)
-                edges.push(new Edge(listNode, entityNode))
-              })
-            } catch (e) {
-              _this.$message.error(_this.errorMsgHandler(e))
-            } finally {
-              _this.rightBox.loading = false
+      return {x:finalX, y:finalY}
+    },
+    handleToolsbarClick (code) {
+      if (code === 'undo') {//上一步
+        const data = this.stackData.undo.pop()
+        this.stackData.justUndo = true
+        if(data) {
+          const { nodes, links } = this.graph.graphData()
+          data.nodes.forEach(popNode => {
+            const popNodeIndex = nodes.findIndex(item => item.id === popNode.id)
+            if (popNodeIndex > -1) {
+              nodes.splice(popNodeIndex,1)
             }
-          } else {
-            this.$message.warning(this.$t('tip.maxExpandDepth'))
-          }
-          _this.addItems(nodes, edges)
-          _this.cleanTempNodesAndTempEdges()
-          _this.graph.layout()
-          // 手动高亮listNode
-          const _listNode = _this.graph.findById(listNode.id)
-          _this.graph.emit('node:click', { item: _listNode, target: _listNode.getKeyShape() })
-          if (_this.stackData.justUndo) {
-            _this.stackData.justUndo = false
-            _this.stackData.redo = []
-          }
-          if (_this.stackData.justRedo) {
-            _this.stackData.justRedo = false
-            _this.stackData.redo = []
+          })
+          data.links.forEach(link => {
+            const linksIndex = links.findIndex(item => item.source.id === link.source && item.target.id === link.target)
+            if (linksIndex > -1) {
+              links.splice(linksIndex,1)
+            }
+          })
+          this.cleanTempItems()
+          this.stackData.redo.push(data)
+          if (this.stackData.justRedo) {
+            this.stackData.justRedo = false
           }
+          this.onCloseBlock()
         }
-      })
-      this.graph.on('node:mouseenter', function (e) {
-        e.item.setState('hover', true)
-      })
-      this.graph.on('node:mouseleave', function (e) {
-        e.item.setState('hover', false)
-      })
-      function refreshDraggedNodePosition (e) {
-        const model = e.item.get('model')
-        model.fx = e.x
-        model.fy = e.y
+      } else if (code === 'redo') {//下一步
+        const data = this.stackData.redo.pop()
+        if(data) {
+          this.stackData.justRedo = true
+          this.addItems(data.nodes, data.links)
+          this.cleanTempItems()
+          if (this.stackData.justUndo) {
+            this.stackData.justUndo = false
+          }
+          this.onCloseBlock()
+        }
+      } else if (code === 'autoZoom') {
+        this.graph.zoomToFit(100,100)
+      } else if (code === 'zoomOut') {
+        this.graph.zoom(this.graph.zoom() + 0.2)
+      } else if (code === 'zoomIn') {
+        this.graph.zoom(this.graph.zoom() - 0.2)
+      } else {
+        this.clickNode = this.rootNode
+        this.stackData = {
+          undo: [],
+          redo: [],
+          justUndo: false,
+          justRedo: false
+        }
+        this.graph.graphData(_.cloneDeep(this.initialData)).centerAt(0, 0).zoom(0.9999)
+        this.rightBox.show = true
+        this.rightBox.node = this.rootNode
+        this.rightBox.mode = 'detail'
       }
-      function generateTempNodeCoordinate (sourceNode, event) {
-        const sx = sourceNode.x
-        const sy = sourceNode.y
-        const cx = event.x
-        const cy = event.y
-        return {
-          x: cx + cx - sx + Math.random() * 30 - 15,
-          y: cy + cy - sy + Math.random() * 30 - 15
+    },
+
+    getNodeStyle (curNodeType, entityType) {
+      switch (curNodeType) {
+        case nodeType.rootNode: {
+          return this.getRootNodeStyle(entityType)
+        }
+        case nodeType.listNode: {
+          return this.getListNodeStyle(entityType)
+        }
+        case nodeType.entityNode: {
+          return this.getEntityNodeStyle(entityType)
+        }
+        case nodeType.tempNode: {
+          return this.getEntityNodeStyle(entityType)
         }
       }
     },
-    addItems (nodes = [], edges = [], stack = true) {
-      // 过滤掉已经存在的node
-      const _nodes = nodes.filter(n => {
-        return !this.graph.findById(n.id)
-      })
-      _nodes.forEach(n => {
-        this.graph.addItem('node', n)
-      })
-      edges.forEach(e => {
-        this.graph.addItem('edge', e)
-      })
-      if (stack) {
-        this.stackData.undo.push({ nodes: _nodes, edges })
+    getRootNodeStyle (entityType) {
+      const nodeStyle = {
+        innerR: 19,
+        fillStyle: '#FFFFFF',
+        shadowR: 25,
+        selectedShadowR: 36,
+        font: '9px NotoSansSChineseRegular',
+        fontColor: '#353636',
+        fontBgColor: 'rgba(255,255,255,0.8)'
+      }
+      switch (entityType) {
+        case 'ip': {
+          return {
+            ...nodeStyle,
+            iconWidth: 24,
+            iconHeight: 21,
+            borderColor: 'rgba(126,159,84,1)',
+            shadowColor: 'rgba(126,159,84,0.21)',
+            hoveredShadowColor: 'rgba(126,159,84,0.36)',
+            selectedShadowColor: 'rgba(126,159,84,0.1)'
+          }
+        }
+        case 'domain': {
+          return {
+            ...nodeStyle,
+            iconWidth: 24,
+            iconHeight: 24,
+            borderColor: 'rgba(56,172,210,1)',
+            shadowColor: 'rgba(56,172,210,0.21)',
+            hoveredShadowColor: 'rgba(56,172,210,0.36)',
+            selectedShadowColor: 'rgba(56,172,210,0.1)'
+          }
+        }
+        case 'app': {
+          return {
+            ...nodeStyle,
+            iconWidth: 21,
+            iconHeight: 24,
+            borderColor: 'rgba(229,162,25,1)',
+            shadowColor: 'rgba(229,162,25,0.21)',
+            hoveredShadowColor: 'rgba(229,162,25,0.36)',
+            selectedShadowColor: 'rgba(229,162,25,0.1)'
+          }
+        }
+      }
+      return {
+        ...nodeStyle,
+        iconWidth: 24,
+        iconHeight: 21,
+        borderColor: 'rgba(126,159,84,1)',
+        shadowColor: 'rgba(126,159,84,0.21)',
+        hoveredShadowColor: 'rgba(126,159,84,0.36)',
+        selectedShadowColor: 'rgba(126,159,84,0.1)'
       }
     },
-    setItemsStata (models = [], stateName, state) {
-      models.forEach(m => {
-        this.graph.setItemState(this.graph.findById(m.id), stateName, state)
-      })
+    getListNodeStyle (entityType) {
+      let iconWidth = 20
+      let iconHeight = 18
+      switch (entityType) {
+        case 'ip': {
+          iconWidth = 20
+          iconHeight = 18
+          break
+        }
+        case 'domain': {
+          iconWidth = 20
+          iconHeight = 20
+          break
+        }
+        case 'app': {
+          iconWidth = 18
+          iconHeight = 20
+          break
+        }
+      }
+      return {
+        innerR: 16,
+        shadowR: 22,
+        fillStyle: '#FFFFFF',
+        font: '9px NotoSansSChineseRegular',
+        fontColor: '#353636',
+        fontBgColor: 'rgba(255,255,255,0.8)',
+        iconWidth,
+        iconHeight,
+        borderColor: 'rgba(119,131,145,0.5)',
+        selectedBorderColor: 'rgba(119,131,145,0.8)',
+        hoveredShadowColor: 'rgba(151,151,151,0.21)',
+        selectedShadowColor: 'rgba(151,151,151,0.4)'
+      }
     },
-    cleanTempNodesAndTempEdges () {
-      // 清除现有tempNode和tempEdge
-      const tempNodes = this.graph.findAll('node', node => node.get('model').type === nodeType.tempNode)
+    getEntityNodeStyle (entityType) {
+      let iconWidth = 20
+      let iconHeight = 18
+      switch (entityType) {
+        case 'ip': {
+          iconWidth = 20
+          iconHeight = 18
+          break
+        }
+        case 'domain': {
+          iconWidth = 20
+          iconHeight = 20
+          break
+        }
+        case 'app': {
+          iconWidth = 18
+          iconHeight = 20
+          break
+        }
+      }
+      return {
+        shadowR: 15,
+        innerR: 10,
+        fillStyle: '#FFFFFF',
+        iconWidth,
+        iconHeight,
+        hoveredShadowColor: 'rgba(151,151,151,0.12)',
+        selectedShadowColor: 'rgba(151,151,151,0.24)'
+      }
+    },
+    /**
+     * 求直线与圆的交点坐标
+     * 圆：x2, y2, r
+     * 线段： x1, y1, x2, y2
+     * */
+    findCircleLineIntersection (x2, y2, r, x1, y1) {
+      r = r + +this.defaultMargin
+      const xx = x1 - x2
+      const yy = y1 - y2
+      let n = Math.sqrt(Math.pow(r, 2) / [Math.pow(yy / xx, 2) + 1])
+      let m = Math.sqrt(Math.pow(r, 2) - Math.pow(n, 2))
+      if (xx > 0) {
+        if (yy > 0) { // 第四象限
+
+        } else { // 第一象限
+          m *= -1
+        }
+      } else {
+        n *= -1
+        if (yy > 0) { // 第三象限
+
+        } else { // 第二象限
+          m *= -1
+        }
+      }
+      const x = x2 + n
+      const y = y2 + m
+      return [{ x, y }]
+    },
+    /**
+     ctx ：Canvas绘图环境
+     fromX, fromY ：起点坐标（也可以换成 p1 ，只不过它是一个数组）
+     toX, toY ：终点坐标 (也可以换成 p2 ，只不过它是一个数组)
+     theta ：三角斜边一直线夹角
+     headlen ：三角斜边长度
+     width ：箭头线宽度
+     color ：箭头颜色
+     */
+    drawArrow (ctx, fromX, fromY, toX, toY, theta, headlen) {
+      theta = typeof (theta) != 'undefined' ? theta : 30
+      headlen = typeof (theta) != 'undefined' ? headlen : 10
+
+      // 计算各角度和对应的P2,P3坐标
+      const angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI
+      const angle1 = (angle + theta) * Math.PI / 180
+      const angle2 = (angle - theta) * Math.PI / 180
+      const topX = headlen * Math.cos(angle1)
+      const topY = headlen * Math.sin(angle1)
+      const botX = headlen * Math.cos(angle2)
+      const botY = headlen * Math.sin(angle2)
+
+      let arrowX = fromX - topX
+      let arrowY = fromY - topY
+
+      arrowX = toX + topX
+      arrowY = toY + topY
+      ctx.moveTo(arrowX, arrowY)
+      ctx.lineTo(toX, toY)
+      arrowX = toX + botX
+      arrowY = toY + botY
+      ctx.lineTo(arrowX, arrowY)
+      ctx.lineTo(toX + topX, toY + topY)
+    },
+    getNodeLevel (id) {
+      return 5
+      const { findShortestPath } = Algorithm
+      const { nodes, links } = this.graph.graphData()
+      const g6FormatData = { nodes: _.cloneDeep(nodes), edges: _.cloneDeep(links) }
+      g6FormatData.edges.forEach(l => {
+        l.source = l.source.id
+        l.target = l.target.id
+      })
+      const info = findShortestPath(g6FormatData, this.entity.entityName, id)
+      return info.length
+    },
+    generateTempNodeCoordinate (sourceNode, event) {
+      const sx = sourceNode.x
+      const sy = sourceNode.y
+      const cx = event.x
+      const cy = event.y
+      return {
+        x: cx + cx - sx + Math.random() * 30 - 15,
+        y: cy + cy - sy + Math.random() * 30 - 15
+      }
+    },
+    addItems (toAddNodes, toAddLinks,stack = true) {
+      if (toAddNodes.length || toAddLinks.length) {
+        const { nodes, links } = this.graph.graphData()
+        const nodes2 = toAddNodes.filter(n => !nodes.some(n2 => n.id === n2.id))
+        nodes.push(...nodes2)
+        links.push(...toAddLinks)
+        this.graph.graphData({ nodes, links })
+
+        if(stack) {
+          this.stackData.undo.push(_.cloneDeep({nodes:nodes2, links:toAddLinks}))
+        }
+      }
+    },
+    cleanTempItems () {
+      const { nodes, links } = this.graph.graphData()
+      const newNodes = nodes.filter(n => n.type !== nodeType.tempNode)
+      const newLinks = links.filter(l => l.type !== linkType.temp)
+      if (newNodes.length !== nodes.length || newLinks.length !== links.length) {
+        this.graph.graphData({ nodes: newNodes, links: newLinks })
+      }
+      //清理临时节点时，同时释放临时节点对应的entity节点,不再固定位置
+      const tempNodes = nodes.filter(n => n.type === nodeType.tempNode)
       tempNodes.forEach(n => {
-        this.graph.removeItem(n)
+        if(n.sourceNode) {
+          n.sourceNode.fx = null
+          n.sourceNode.fy = null
+        }
       })
-      const tempEdges = this.graph.findAll('edge', edge => edge.get('model').isTemp)
-      tempEdges.forEach(n => {
-        this.graph.removeItem(n)
+      //点击节点的时候，把所有list节点的的preDragX和preDragY置为null,便于拖动其它节点时的计算
+      nodes.forEach(node => {
+        //if(node.type === nodeType.listNode) {
+          node.preDragX = null
+          node.preDragY = null
+        //}
       })
     },
-    async generateInitialData () {
+    async generateInitialData (clickNode) {
       const nodes = []
-      const edges = []
-      // 生成rootNode，并查询相关数据
-      const { offsetWidth, offsetHeight } = document.getElementById('entityGraph')
-      const coordinate = {
-        rootNode: {
-          fx: offsetWidth * 0.4,
-          fy: offsetHeight * 0.3 - 20
-        }
-      }
-      coordinate.ipListNode = {
-        fx: coordinate.rootNode.fx + 200,
-        fy: coordinate.rootNode.fy
-      }
-      coordinate.domainListNode = {
-        fx: coordinate.rootNode.fx + 100,
-        fy: coordinate.rootNode.fy + 173
-      }
-      coordinate.appListNode = {
-        fx: coordinate.rootNode.fx - 100,
-        fy: coordinate.rootNode.fy + 173
-      }
-      const rootNode = new Node(nodeType.rootNode, this.entity.entityName, {
-        entityType: this.entity.entityType,
-        entityName: this.entity.entityName
-        /* x: coordinate.rootNode.fx,
-        y: coordinate.rootNode.fy */
-      })
+      const links = []
+
+      const rootNode = clickNode || new Node(nodeType.rootNode, this.entity.entityName, this.entity, null, this.getIconUrl(this.entity.entityType, true, true))
       await rootNode.queryDetailData()
       nodes.push(rootNode)
+      this.clickNode = rootNode
+      this.rootNode = rootNode
 
       // 生成listNode和entityNode及edge
-      if (rootNode.myData.relatedEntity) {
+      if (rootNode.data.relatedEntities) {
         // listNode
         const listNodes = []
-        const keys = Object.keys(rootNode.myData.relatedEntity)
+        const keys = Object.keys(rootNode.data.relatedEntities)
         keys.forEach(k => {
-          if (rootNode.myData.relatedEntity[k].total) {
+          if (rootNode.data.relatedEntities[k].total) {
             const listNode = new Node(
               nodeType.listNode,
-              `${rootNode.id}__${k}-list`,
+              `${rootNode.realId}__${k}-list`,
               {
                 entityType: k
-                /* x: coordinate[`${k}ListNode`].fx,
-                y: coordinate[`${k}ListNode`].fy */
               },
-              rootNode
+              rootNode,
+              this.getIconUrl(k, false, false)
             )
             listNodes.push(listNode)
-            edges.push(new Edge(rootNode, listNode))
+            links.push(new Link(rootNode, listNode))
           }
         })
         // entityNode
         const entityNodes = []
-        for (const node of listNodes) {
-          const entities = await queryRelatedEntity(rootNode, node.myData.entityType)
-          rootNode.myData.relatedEntity[node.myData.entityType].list = entities.list
+        for (const listNode of listNodes) {
+          const entities = await rootNode.queryRelatedEntities(listNode.data.entityType)
+          rootNode.data.relatedEntities[listNode.data.entityType].list = entities.list
           entities.list.forEach(entity => {
             const entityNode = new Node(
               nodeType.entityNode,
               entity.vertex,
               {
-                entityType: node.myData.entityType,
+                entityType: listNode.data.entityType,
                 entityName: entity.vertex
               },
-              node
+              listNode,
+              this.getIconUrl(listNode.data.entityType, false, false)
             )
             entityNodes.push(entityNode)
-            edges.push(new Edge(node, entityNode))
+            links.push(new Link(listNode, entityNode))
           })
         }
         nodes.push(...listNodes, ...entityNodes)
       }
+      this.rightBox.node = rootNode
       return {
-        nodes: nodes,
-        edges: edges
+        nodes,
+        links
       }
     },
-    getNodeLevel (id) {
-      const { findShortestPath } = Algorithm
-      const info = findShortestPath(this.graph.save(), this.entity.entityName, id)
-      return info.length
-    },
-    onCloseBlock () {
-      this.rightBox.mode = ''
-      this.rightBox.show = false
-    },
-    buildTooltip () {
-      const _this = this
-      return new G6.Tooltip({
-        offsetX: 10,
-        offsetY: 20,
-        itemTypes: ['node'],
-        getContent (e) {
-          const node = e.item.getModel()
-          if (node.type === nodeType.listNode) {
-            let iconClass = ''
-            let title = ''
-            let total = 0
-            let loadedCount = 0
-            switch (node.myData.entityType) {
-              case 'ip': {
-                iconClass = 'cn-icon cn-icon-resolve-ip'
-                title = _this.$t('entities.graph.resolveIp')
-                total = _.get(node.sourceNode.myData, 'relatedEntity.ip.total', 0)
-                loadedCount = _.get(node.sourceNode.myData, 'relatedEntity.ip.list', []).length
-                break
-              }
-              case 'domain': {
-                iconClass = 'cn-icon cn-icon-subdomain'
-                title = node.isSubdomain() ? _this.$t('entities.subdomain') : _this.$t('entity.graph.resolveDomain')
-                total = _.get(node.sourceNode.myData, 'relatedEntity.domain.total', 0)
-                loadedCount = _.get(node.sourceNode.myData, 'relatedEntity.domain.list', []).length
-                break
-              }
-              case 'app': {
-                iconClass = 'cn-icon cn-icon-app-name'
-                title = _this.$t('entities.tab.relatedApp')
-                total = _.get(node.sourceNode.myData, 'relatedEntity.app.total', 0)
-                loadedCount = _.get(node.sourceNode.myData, 'relatedEntity.app.list', []).length
-                break
-              }
-            }
-            return `<div class="primary-node-tooltip">
-              <div class="tooltip__header"><i class="${iconClass}"></i><span class="tooltip__title">${title}</span></div>
-              <div class="tooltip__content">
-                <span>${_this.$t('entity.graph.associatedCount')}:&nbsp;${total}</span>
-                <span>${_this.$t('entity.graph.expandedEntityCount')}:&nbsp;${loadedCount}</span>
-              </div>
-            </div>`
-          } else if (node.type === nodeType.entityNode || node.type === nodeType.rootNode) {
-            if (node.myData && node.myData.tags && node.myData.tags.length > 0) {
-              return `<div class="entity-node-tooltip">
-                <div class="tooltip__header">
-                  <span class="tooltip__title">${node.id}</span>
-                </div>
-                <div class="tooltip__content">
-                  <div class="content-header">
-                    <div class="header-icon"></div>
-                    <span>${_this.$t('entity.graph.tags')}</span>
-                  </div>
-                  <div class="content-tag-list">${generateTagHTML(node.myData.tags)}</div>
-                </div>
-              </div>`
-            } else {
-              return `<div style="padding: 0 6px; font-size: 15px; line-height: 15px; color: #111;">${node.id}</div>`
-            }
-          } else if (node.type === nodeType.tempNode) {
-            return node.label
-          }
-          function generateTagHTML (tags) {
-            let html = ''
-            if (tags) {
-              tags.forEach(t => {
-                html += `<div class="entity-tag entity-tag--level-two-${t.type}">
-                  <span>${t.value}</span>
-                </div>`
-              })
-            }
-            return html
-          }
-        }
-      })
-    },
-    buildToolbar () {
-      const tc = document.createElement('div')
-      tc.id = 'toolbarContainer'
-      tc.className = 'graph-toolbar'
-      document.body.appendChild(tc)
-      const toolbar = new G6.ToolBar({
-        container: tc,
-        className: 'toolbar__tools',
-        getContent: () => {
-          return `<ul>
-            <li code='zoomOut' title="${this.$t('overall.zoomOut')}"><i class="cn-icon cn-icon-zoom-out"></i></li>
-            <li code='zoomIn' title="${this.$t('overall.zoomIn')}"><i class="cn-icon cn-icon-zoom-in"></i></li>
-            <li code='autoZoom' title="${this.$t('overall.autoZoom')}"><i class="cn-icon cn-icon-reset"></i></li>
-            <li code='undo' title="${this.$t('overall.preStep')}" id="preStep" class="toolbar--unactivated"><i class="cn-icon cn-icon-pre-step"></i></li>
-            <li code='redo' title="${this.$t('overall.nextStep')}" id="nextStep" class="toolbar--unactivated"><i class="cn-icon cn-icon-next-step"></i></li>
-            <li code='toDefault' title="${this.$t('overall.reset')}"><i class="cn-icon cn-icon-to-default"></i></li>
-          </ul>`
-        },
-        handleClick: (code, graph) => {
-          if (code === 'undo') { // 删掉刚加进来的node和edge
-            const data = this.stackData.undo.pop()
-            this.stackData.justUndo = true
-            data.nodes.forEach(n => {
-              if (n.type === nodeType.listNode) {
-                const listNode = this.graph.findById(n.id)
-                const listNodeEdges = listNode.getEdges()
-                listNodeEdges.forEach(e => {
-                  e.setState('mySelected', false)
-                })
-                listNode.setState('mySelected', false)
-              }
-              this.graph.removeItem(n.id)
-            })
-            data.edges.forEach(e => {
-              this.graph.removeItem(e.id)
-            })
-            this.stackData.redo.push(data)
-            if (this.stackData.justRedo) {
-              this.stackData.justRedo = false
-            }
-            this.cleanTempNodesAndTempEdges()
-            this.graph.layout()
-            this.onCloseBlock()
-            // graph中删掉后，右侧列表也得删
-          } else if (code === 'redo') { // 恢复刚删掉的node和edge
-            const data = this.stackData.redo.pop()
-            this.stackData.justRedo = true
-            this.addItems(data.nodes, data.edges)
-            if (this.stackData.justUndo) {
-              this.stackData.justUndo = false
-            }
-            this.cleanTempNodesAndTempEdges()
-            this.graph.layout()
-            this.onCloseBlock()
-            // graph中恢复后，右侧列表也得恢复
-          } else if (code === 'autoZoom') {
-            this.graph.zoomTo(1)
-            this.graph.fitCenter()
-          } else if (code === 'zoomOut') {
-            this.graph.zoomTo(this.graph.getZoom() + 0.2, this.center)
-          } else if (code === 'zoomIn') {
-            const currentZoom = this.graph.getZoom()
-            this.graph.zoomTo(currentZoom - 0.2, this.center)
-          } else {
-            this.graph.clear()
-            this.graph.data(this.initialData)
-            this.graph.render()
-            this.stackData = {
-              undo: [],
-              redo: [],
-              justUndo: false,
-              justRedo: false
-            }
-            const rootNode = this.graph.findById(this.entity.entityName)
-            this.graph.emit('node:click', { item: rootNode, target: rootNode.getKeyShape() }) // 手动触发rootNode的点击事件
-          }
-        }
-      })
-      return toolbar
-    },
     async expandList (nodeId) {
-      const node = this.graph.findById(nodeId)
-      const model = node.getModel()
-      const sourceNode = this.graph.findById(model.sourceNode.id)
-      const sourceModel = sourceNode.getModel()
-      const expandType = model.myData.entityType
-      if (sourceModel.myData.relatedEntity[expandType].list.length >= sourceModel.myData.relatedEntity[expandType].total) {
+      const { nodes } = this.graph.graphData()
+      const node = nodes.find(n => n.id === nodeId)
+      const sourceNode = nodes.find(n => n.id === node.sourceNode.id)
+      const expandType = node.data.entityType
+      if (sourceNode.data.relatedEntities[expandType].list.length >= sourceNode.data.relatedEntities[expandType].total) {
         return
       }
-      if (sourceModel.myData.relatedEntity[expandType].list.length < 50) {
-        this.rightBox.loading = true
+      if (sourceNode.data.relatedEntities[expandType].list.length < 50) {
+        //this.rightBox.loading = true
         try {
-          const entities = await queryRelatedEntity(sourceModel, expandType)
-          sourceModel.myData.relatedEntity[expandType].list.push(...entities.list)
-          const entityNodeModels = []
-          const edgeModels = []
+          const entities = await sourceNode.queryRelatedEntities(expandType)
+          sourceNode.data.relatedEntities[expandType].list.push(...entities.list)
+          const toAddNodes = []
+          const toAddLinks = []
           entities.list.forEach(entity => {
-            const entityNodeModel = new Node(nodeType.entityNode, entity.vertex, {
+            const toAddNode = new Node(nodeType.entityNode, entity.vertex, {
               entityType: expandType,
-              entityName: entity.vertex,
-              x: model.x + Math.random() * 500 - 250,
-              y: model.y + Math.random() * 500 - 250
-            }, model)
-            entityNodeModels.push(entityNodeModel)
+              entityName: entity.vertex
+            }, node, this.getIconUrl(node.data.entityType, false, false))
+            toAddNodes.push(toAddNode)
 
-            const edge = new Edge(model, entityNodeModel)
-            edgeModels.push(edge)
+            const toAddLink = new Link(node, toAddNode)
+            toAddLinks.push(toAddLink)
           })
-          this.addItems(entityNodeModels, edgeModels)
-          this.setItemsStata(edgeModels, 'mySelected', true)
-          this.graph.layout()
-          this.rightBox.node = _.cloneDeep(model)
+          this.addItems(toAddNodes, toAddLinks)
+          this.rightBox.node = _.cloneDeep(node)
         } catch (e) {
+          console.error(e)
           this.$message.error(this.errorMsgHandler(e))
         } finally {
           this.rightBox.loading = false
@@ -1029,55 +1062,43 @@ export default {
       }
     },
     async expandDetailList (nodeId, expandType) {
-      const node = this.graph.findById(nodeId)
+      const { nodes } = this.graph.graphData()
+      const node = nodes.find(n => n.id === nodeId)
       if (node) {
-        const nodeModel = node.getModel()
-        if (nodeModel.myData.relatedEntity[expandType].list.length >= nodeModel.myData.relatedEntity[expandType].total) {
+        if (node.data.relatedEntities[expandType].list.length >= node.data.relatedEntities[expandType].total) {
           return
         }
-        if (nodeModel.myData.relatedEntity[expandType].list.length < 50) {
-          const toAddNodeModels = []
-          const toAddEdgeModels = []
+        if (node.data.relatedEntities[expandType].list.length < 50) {
+          const toAddNodes = []
+          const toAddLinks = []
 
-          this.rightBox.loading = true
+          //this.rightBox.loading = true
           try {
-            const entities = await queryRelatedEntity(nodeModel, expandType)
-            nodeModel.myData.relatedEntity[expandType].list.push(...entities.list)
-            const neighbors = node.getNeighbors('target')
-            const listNode = neighbors.find(n => n.getModel().myData.entityType === expandType)
-            let listNodeModel = listNode.getModel()
-            let listEdgeModel
-            // 如果listNode是tempNode，移除，并新建listNode
-            if (listNodeModel.type === nodeType.tempNode) {
-              // 移除tempNode和tempEdge
-              const tempEdges = listNode.getInEdges()
-              tempEdges.forEach(edge => {
-                this.graph.removeItem(edge)
-              })
-              this.graph.removeItem(listNode)
+            const entities = await node.queryRelatedEntities(expandType)
+            node.data.relatedEntities[expandType].list.push(...entities.list)
+            // 移除 tempNode 和 tempEdge
+            this.cleanTempItems()
 
-              listNodeModel = new Node(nodeType.listNode, `${nodeModel.id}__${expandType}-list`, { entityType: expandType, x: listNodeModel.x, y: listNodeModel.y }, nodeModel)
-              listEdgeModel = new Edge(nodeModel, listNodeModel)
-              toAddNodeModels.push(listNodeModel)
-              toAddEdgeModels.push(listEdgeModel)
+            const neighbors = node.getNeighbors(this.graph.graphData())
+            let listNode = neighbors.targetNodes.find(n => n.data.entityType === expandType)
+            if (!listNode) {
+              listNode = new Node(nodeType.listNode, `${node.id}__${expandType}-list`, { entityType: expandType }, node, this.getIconUrl(expandType, false, false))
+              const link = new Link(node, listNode)
+              toAddNodes.push(listNode)
+              toAddLinks.push(link)
             }
             entities.list.forEach(entity => {
-              const entityNodeModel = new Node(nodeType.entityNode, entity.vertex, {
+              const entityNode = new Node(nodeType.entityNode, entity.vertex, {
                 entityType: expandType,
-                entityName: entity.vertex,
-                x: listNodeModel.x + Math.random() * 500 - 250,
-                y: listNodeModel.y + Math.random() * 500 - 250
-              }, listNodeModel)
-              toAddNodeModels.push(entityNodeModel)
-              toAddEdgeModels.push(new Edge(listNodeModel, entityNodeModel))
+                entityName: entity.vertex
+              }, listNode, this.getIconUrl(expandType, false, false))
+              toAddNodes.push(entityNode)
+              toAddLinks.push(new Link(listNode, entityNode))
             })
-            this.addItems(toAddNodeModels, toAddEdgeModels)
-            if (listEdgeModel) {
-              this.graph.setItemState(this.graph.findById(listEdgeModel.id), 'mySelected', true)
-            }
-            this.graph.layout()
-            this.rightBox.node = _.cloneDeep(nodeModel)
+            this.addItems(toAddNodes, toAddLinks)
+            this.rightBox.node = _.cloneDeep(node)
           } catch (e) {
+            console.error(e)
             this.$message.error(this.errorMsgHandler(e))
           } finally {
             this.rightBox.loading = false
@@ -1087,9 +1108,18 @@ export default {
         }
       }
     },
+    onCloseBlock () {
+      this.rightBox.mode = ''
+      this.rightBox.show = false
+    },
     resize () {
-      const container = document.getElementById('entityGraph')
-      this.graph.changeSize(container.offsetWidth, container.offsetHeight)
+
+    },
+    getIconUrl (entityType, colored, isRoot) {
+      const suffix = colored ? '-colored' : ''
+      const img = new Image()
+      img.src = require(`@/assets/img/entity-symbol2/${entityType}${suffix}.svg`)
+      return img
     }
   },
   watch: {
@@ -1114,13 +1144,12 @@ export default {
   async mounted () {
     if (this.entity.entityType && this.entity.entityName) {
       await this.init()
+      this.debounceFunc = this.$_.debounce(this.resize, 300)
+      window.addEventListener('resize', this.debounceFunc)
     }
-    this.debounceFunc = this.$_.debounce(this.resize, 300)
-    window.addEventListener('resize', this.debounceFunc)
   },
   unmounted () {
     window.removeEventListener('resize', this.debounceFunc)
-    this.graph.destroy()
   },
   setup () {
     const route = useRoute()
diff --git a/src/views/entityExplorer/EntityGraph2.vue b/src/views/entityExplorer/EntityGraph2.vue
new file mode 100644
index 00000000..442f2c23
--- /dev/null
+++ b/src/views/entityExplorer/EntityGraph2.vue
@@ -0,0 +1,1146 @@
+<template>
+  <div class="entity-graph">
+    <div class="entity-graph__chart" id="entityGraph">
+    </div>
+    <div class="entity-graph__right-box">
+      <el-drawer
+          v-model="rightBox.show"
+          direction="rtl"
+          custom-class="entity-graph__detail"
+          :close-on-click-modal="true"
+          :modal="false"
+          :size="400"
+          :with-header="false"
+          destroy-on-close>
+        <graph-entity-list
+            v-if="rightBox.mode === 'list'"
+            :node="rightBox.node"
+            :loading="rightBox.loading"
+            @expandList="expandList"
+            @closeBlock="onCloseBlock"
+        >
+        </graph-entity-list>
+        <graph-entity-detail
+            v-else-if="rightBox.mode === 'detail'"
+            :node="rightBox.node"
+            :loading="rightBox.loading"
+            @expandDetailList="expandDetailList"
+            @closeBlock="onCloseBlock"
+        >
+        </graph-entity-detail>
+      </el-drawer>
+    </div>
+  </div>
+</template>
+
+<script>
+import GraphEntityList from '@/views/entityExplorer/entityGraph/GraphEntityList'
+import GraphEntityDetail from '@/views/entityExplorer/entityGraph/GraphEntityDetail'
+import { useRoute } from 'vue-router'
+import { ref, shallowRef } from 'vue'
+import _ from 'lodash'
+import G6, { Algorithm } from '@antv/g6'
+import Node, { nodeType, queryRelatedEntity } from './entityGraph/node'
+import Edge from './entityGraph/edge'
+
+export default {
+  name: 'EntityRelationship',
+  components: {
+    GraphEntityList,
+    GraphEntityDetail
+  },
+  data () {
+    return {
+      debounceFunc: null,
+      chartOption: {
+        container: 'entityGraph',
+        layout: {
+          type: 'force',
+          preventOverlap: true,
+          linkDistance: (d) => {
+            if (d.target.type === nodeType.rootNode || d.target.type === nodeType.listNode) {
+              return 200
+            }
+            return 80
+          },
+          nodeStrength: (d) => {
+            if (d.type === nodeType.rootNode || d.type === nodeType.listNode) {
+              return -100
+            } else if (d.type === nodeType.tempNode) {
+              return -300
+            }
+            return -10
+          },
+          edgeStrength: (d) => {
+            if (d.target.type === nodeType.rootNode || d.target.type === nodeType.listNode) {
+              return 0.1
+            }
+            return 0.7
+          }
+        },
+        modes: {
+          default: ['drag-canvas', 'drag-nodes', 'click-select', 'zoom-canvas']
+        }
+      },
+      /* 自己实现stack操作 */
+      stackData: {
+        undo: [], // 后退
+        justUndo: false, // 是否刚后退了
+        redo: [], // 前进
+        justRedo: false // 是否刚前进了
+      },
+      center: {},
+      initialData: null // 初始化数据，用于重置
+    }
+  },
+  methods: {
+    async init () {
+      this.registerElements() // 注册自定义node
+      const tooltip = this.buildTooltip() // tooltip组件
+      const toolbar = this.buildToolbar() // 工具栏组装件
+      this.chartOption.plugins = [tooltip, toolbar] // 注册组件
+      this.graph = new G6.Graph(this.chartOption)
+      try {
+        const initialData = await this.generateInitialData() // 备份初始数据
+        this.initialData = _.cloneDeep(initialData) // 初始化数据
+        this.graph.data(initialData)
+        this.graph.render()
+        await this.$nextTick(() => {
+          const { x, y } = this.graph.getViewPortCenterPoint()
+          this.center = { x, y }
+        })
+        const rootNode = this.graph.findById(this.entity.entityName)
+        this.bindEvents() // 绑定事件
+        this.graph.emit('node:click', { item: rootNode, target: rootNode.getKeyShape() }) // 手动触发rootNode的点击事件
+      } catch (e) {
+        this.$message.error(this.errorMsgHandler(e))
+      } finally {
+        this.rightBox.loading = false
+      }
+    },
+    registerElements () {
+      const _this = this
+      G6.registerNode(
+        nodeType.rootNode,
+        {
+          draw (cfg, group) {
+            group.addShape('circle', {
+              name: 'rootSelectedShadow',
+              attrs: {
+                r: 25, // selected时38.5
+                fill: getRootNodeStyle(cfg.myData.entityType).selectedShadowColor
+              }
+            })
+            group.addShape('circle', {
+              name: 'rootShadow',
+              attrs: {
+                r: 31.5,
+                fill: getRootNodeStyle(cfg.myData.entityType).shadowColor
+              }
+            })
+            const node = group.addShape('circle', {
+              name: 'rootInner',
+              attrs: {
+                r: 26,
+                fx: cfg.fx,
+                fy: cfg.fy,
+                fill: '#FFFFFF',
+                stroke: getRootNodeStyle(cfg.myData.entityType).borderColor,
+                lineWidth: 1
+              }
+            })
+            group.addShape('image', {
+              attrs: {
+                x: -getRootNodeStyle(cfg.myData.entityType).iconWidth / 2,
+                y: -getRootNodeStyle(cfg.myData.entityType).iconHeight / 2,
+                height: getRootNodeStyle(cfg.myData.entityType).iconHeight,
+                width: getRootNodeStyle(cfg.myData.entityType).iconWidth,
+                img: getIconUrl(cfg.myData.entityType, true, true)
+              },
+              name: 'rootIcon',
+              draggable: true
+            })
+            // 为label建一个box，避免鼠标事件中断
+            group.addShape('rect', {
+              name: 'rootLabelBox',
+              attrs: {
+                width: 64,
+                height: 40,
+                x: -32,
+                y: 10,
+                fill: 'transparent'
+              }
+            })
+            group.addShape('text', {
+              attrs: {
+                text: cfg.label,
+                x: 0,
+                y: 42,
+                fontSize: 12,
+                textAlign: 'center',
+                textBaseline: 'middle',
+                fill: '#353636'
+              },
+              name: 'rootLabel'
+            })
+            return node
+          },
+          setState (name, value, node) {
+            const group = node.getContainer()
+            const model = node.getModel()
+            const selectedShadowShape = group.get('children')[0]
+            const shadowShape = group.get('children')[1]
+            if (name === 'hover') {
+              // 鼠标悬浮时，若不处于selected状态，才继续处理
+              if (!node.hasState('mySelected')) {
+                // hover时，加深shadow的颜色
+                if (value) {
+                  shadowShape.attr('fill', getRootNodeStyle(model.myData.entityType).hoveredShadowColor)
+                } else {
+                  shadowShape.attr('fill', getRootNodeStyle(model.myData.entityType).shadowColor)
+                }
+              }
+            } else if (name === 'mySelected') {
+              // select事件，取消自身hover状态，取消其他node和edge的高亮状态，高亮自身和自身相关的edge
+              node.setState('hover', false)
+              // 变更样式
+              if (value) {
+                // 取消其他高亮
+                const nodes = _this.graph.getNodes()
+                const edges = _this.graph.getEdges()
+                nodes.forEach(n => {
+                  if (n.getModel().id !== node.getModel().id) {
+                    n.setState('mySelected', false)
+                  }
+                })
+                edges.forEach(n => {
+                  n.setState('mySelected', false)
+                })
+                // 高亮自身
+                shadowShape.attr('fill', getRootNodeStyle(model.myData.entityType).hoveredShadowColor)
+                selectedShadowShape.attr('r', 38.5)
+                // 高亮自身相关的edge
+                const aboutEdges = node.getEdges()
+                aboutEdges.forEach(n => {
+                  n.setState('mySelected', true)
+                })
+              } else {
+                shadowShape.attr('fill', getRootNodeStyle(model.myData.entityType).shadowColor)
+                selectedShadowShape.attr('r', 25)
+              }
+            }
+          }
+        },
+        'single-node'
+      )
+      G6.registerNode(
+        nodeType.listNode,
+        {
+          draw (cfg, group) {
+            group.addShape('circle', {
+              name: 'listShadow',
+              attrs: {
+                r: 20, // selected时26.5
+                x: 0,
+                y: 0,
+                fill: getListNodeStyle(cfg.myData.entityType).hoveredShadowColor
+              }
+            })
+            const node = group.addShape('circle', {
+              name: 'listInner',
+              attrs: {
+                r: 21,
+                fx: cfg.fx,
+                fy: cfg.fy,
+                fill: '#FFFFFF',
+                stroke: getListNodeStyle(cfg.myData.entityType).borderColor,
+                lineWidth: 1
+              }
+            })
+            group.addShape('image', {
+              attrs: {
+                x: -getListNodeStyle(cfg.myData.entityType).iconWidth / 2,
+                y: -getListNodeStyle(cfg.myData.entityType).iconHeight / 2,
+                height: getListNodeStyle(cfg.myData.entityType).iconHeight,
+                width: getListNodeStyle(cfg.myData.entityType).iconWidth,
+                img: getIconUrl(cfg.myData.entityType, false, false)
+              },
+              name: 'listIcon',
+              draggable: true
+            })
+            // 为label建一个box，避免鼠标事件中断
+            group.addShape('rect', {
+              name: 'rootLabelBox',
+              attrs: {
+                width: 46,
+                height: 30,
+                x: -23,
+                y: 12,
+                fill: 'transparent'
+              }
+            })
+            group.addShape('text', {
+              attrs: {
+                text: cfg.label,
+                x: 0,
+                y: 34,
+                fontSize: 12,
+                textAlign: 'center',
+                textBaseline: 'middle',
+                fill: '#353636'
+              },
+              name: 'listLabel'
+            })
+            return node
+          },
+          setState (name, value, node) {
+            const group = node.getContainer()
+            const model = node.getModel()
+            const shadowShape = group.get('children')[0]
+            const innerShape = group.get('children')[1]
+            if (name === 'hover') {
+              // 鼠标悬浮时，若不处于selected状态，才继续处理
+              if (!node.hasState('mySelected')) {
+                // hover时，出现shadow
+                shadowShape.attr('fill', getListNodeStyle(model.myData.entityType).hoveredShadowColor)
+                if (value) {
+                  shadowShape.attr('r', 26.5)
+                } else {
+                  shadowShape.attr('r', 20)
+                }
+              }
+            } else if (name === 'mySelected') {
+              // select事件，取消自身hover状态，取消其他node和edge的高亮状态，高亮自身和自身相关的edge
+              node.setState('hover', false)
+              if (value) {
+                // 取消其他高亮
+                const nodes = _this.graph.getNodes()
+                const edges = _this.graph.getEdges()
+                nodes.forEach(n => {
+                  if (n.getModel().id !== node.getModel().id) {
+                    n.setState('mySelected', false)
+                  }
+                })
+                edges.forEach(n => {
+                  n.setState('mySelected', false)
+                })
+                // 高亮自身
+                shadowShape.attr('fill', getListNodeStyle(model.myData.entityType).selectedShadowColor)
+                shadowShape.attr('r', 26.5)
+                innerShape.attr('stroke', getListNodeStyle(model.myData.entityType).selectedBorderColor)
+                // 高亮自身相关的edge
+                const aboutEdges = node.getEdges()
+                aboutEdges.forEach(n => {
+                  n.setState('mySelected', true)
+                })
+              } else {
+                shadowShape.attr('fill', getListNodeStyle(model.myData.entityType).hoveredShadowColor)
+                shadowShape.attr('r', 20)
+                innerShape.attr('stroke', getListNodeStyle(model.myData.entityType).borderColor)
+              }
+            }
+          }
+        },
+        'single-node'
+      )
+      G6.registerNode(
+        nodeType.entityNode,
+        {
+          draw (cfg, group) {
+            group.addShape('circle', {
+              name: 'entityShadow',
+              attrs: {
+                r: 18,
+                x: 0,
+                y: 0,
+                fill: 'transparent'
+              }
+            })
+            return group.addShape('image', {
+              attrs: {
+                x: -getEntityNodeStyle(cfg.myData.entityType).iconWidth / 2,
+                y: -getEntityNodeStyle(cfg.myData.entityType).iconHeight / 2,
+                height: getEntityNodeStyle(cfg.myData.entityType).iconHeight,
+                width: getEntityNodeStyle(cfg.myData.entityType).iconWidth,
+                img: getIconUrl(cfg.myData.entityType, true, false)
+              },
+              name: 'entityIcon'
+            })
+          },
+          setState (name, value, node) {
+            const group = node.getContainer()
+            const model = node.getModel()
+            const shadowShape = group.get('children')[0]
+            if (name === 'mySelected') {
+              // select事件，取消自身hover状态，取消其他node和edge的高亮状态，高亮自身和自身相关的edge
+              node.setState('hover', false)
+              if (value) {
+                // 取消其他高亮
+                const nodes = _this.graph.getNodes()
+                const edges = _this.graph.getEdges()
+                nodes.forEach(n => {
+                  if (n.getModel().id !== node.getModel().id) {
+                    n.setState('mySelected', false)
+                  }
+                })
+                edges.forEach(n => {
+                  n.setState('mySelected', false)
+                })
+                // 高亮自身
+                shadowShape.attr('fill', getEntityNodeStyle(model.myData.entityType).selectedShadowColor)
+                // 高亮自身相关的edge
+                const aboutEdges = node.getEdges()
+                aboutEdges.forEach(n => {
+                  n.setState('mySelected', true)
+                })
+              } else {
+                shadowShape.attr('fill', 'transparent')
+              }
+            }
+          }
+        },
+        'single-node'
+      )
+      G6.registerNode(
+        nodeType.tempNode,
+        {
+          draw (cfg, group) {
+            group.addShape('text', {
+              attrs: {
+                text: cfg.label,
+                x: 0,
+                y: 22,
+                fontSize: 12,
+                textAlign: 'center',
+                textBaseline: 'middle',
+                fill: '#353636',
+                opacity: 0.7
+              },
+              name: 'tempLabel'
+            })
+            return group.addShape('image', {
+              attrs: {
+                x: -getListNodeStyle(cfg.myData.entityType).iconWidth / 2,
+                y: -getListNodeStyle(cfg.myData.entityType).iconHeight / 2,
+                height: getListNodeStyle(cfg.myData.entityType).iconHeight,
+                width: getListNodeStyle(cfg.myData.entityType).iconWidth,
+                img: getIconUrl(cfg.myData.entityType, false, false),
+                opacity: 0.7
+              },
+              name: 'tempIcon'
+            })
+          },
+          setState (name, value, node) {
+            // 重写setState，避免鼠标事件导致重新加载图片
+          }
+        },
+        'single-node'
+      )
+      function getRootNodeStyle (entityType) {
+        switch (entityType) {
+          case 'ip': {
+            return {
+              iconWidth: 26,
+              iconHeight: 23,
+              borderColor: 'rgba(126,159,84,1)',
+              shadowColor: 'rgba(126,159,84,0.21)',
+              hoveredShadowColor: 'rgba(126,159,84,0.36)',
+              selectedShadowColor: 'rgba(126,159,84,0.1)'
+            }
+          }
+          case 'domain': {
+            return {
+              iconWidth: 28,
+              iconHeight: 24,
+              borderColor: 'rgba(56,172,210,1)',
+              shadowColor: 'rgba(56,172,210,0.21)',
+              hoveredShadowColor: 'rgba(56,172,210,0.36)',
+              selectedShadowColor: 'rgba(56,172,210,0.1)'
+            }
+          }
+          case 'app': {
+            return {
+              iconWidth: 24,
+              iconHeight: 26,
+              borderColor: 'rgba(229,162,25,1)',
+              shadowColor: 'rgba(229,162,25,0.21)',
+              hoveredShadowColor: 'rgba(229,162,25,0.36)',
+              selectedShadowColor: 'rgba(229,162,25,0.1)'
+            }
+          }
+        }
+        return {
+          iconWidth: 26,
+          iconHeight: 23,
+          borderColor: 'rgba(126,159,84,1)',
+          shadowColor: 'rgba(126,159,84,0.21)',
+          hoveredShadowColor: 'rgba(126,159,84,0.36)',
+          selectedShadowColor: 'rgba(126,159,84,0.1)'
+        }
+      }
+      function getListNodeStyle (entityType) {
+        switch (entityType) {
+          case 'ip': {
+            return {
+              iconWidth: 24,
+              iconHeight: 21,
+              borderColor: 'rgba(119,131,145,0.6)',
+              selectedBorderColor: 'rgba(126,159,84,1)',
+              hoveredShadowColor: 'rgba(151,151,151,0.21)',
+              selectedShadowColor: 'rgba(126,159,84,0.21)'
+            }
+          }
+          case 'domain': {
+            return {
+              iconWidth: 24,
+              iconHeight: 24,
+              borderColor: 'rgba(119,131,145,0.6)',
+              selectedBorderColor: 'rgba(56,172,210,1)',
+              hoveredShadowColor: 'rgba(151,151,151,0.21)',
+              selectedShadowColor: 'rgba(56,172,210,0.21)'
+            }
+          }
+          case 'app': {
+            return {
+              iconWidth: 22,
+              iconHeight: 24,
+              borderColor: 'rgba(119,131,145,0.6)',
+              selectedBorderColor: 'rgba(229,162,25,1)',
+              hoveredShadowColor: 'rgba(151,151,151,0.21)',
+              selectedShadowColor: 'rgba(229,162,25,0.21)'
+            }
+          }
+        }
+        return {
+          iconWidth: 24,
+          iconHeight: 21,
+          borderColor: 'rgba(119,131,145,0.6)',
+          selectedBorderColor: 'rgba(126,159,84,1)',
+          hoveredShadowColor: 'rgba(151,151,151,0.21)',
+          selectedShadowColor: 'rgba(126,159,84,0.21)'
+        }
+      }
+      function getEntityNodeStyle (entityType) {
+        switch (entityType) {
+          case 'ip': {
+            return {
+              iconWidth: 22,
+              iconHeight: 20,
+              selectedShadowColor: 'rgba(126,159,84,0.1)'
+            }
+          }
+          case 'domain': {
+            return {
+              iconWidth: 22,
+              iconHeight: 22,
+              selectedShadowColor: 'rgba(56,172,210,0.1)'
+            }
+          }
+          case 'app': {
+            return {
+              iconWidth: 21,
+              iconHeight: 24,
+              selectedShadowColor: 'rgba(229,162,25,0.1)'
+            }
+          }
+        }
+        return {
+          iconWidth: 22,
+          iconHeight: 20,
+          borderColor: 'rgba(119,131,145,1)',
+          selectedBorderColor: 'rgba(126,159,84,1)',
+          hoveredShadowColor: 'rgba(151,151,151,0.21)',
+          selectedShadowColor: 'rgba(126,159,84,0.1)'
+        }
+      }
+      function getIconUrl (entityType, colored, isRoot) {
+        let suffix
+        if (entityType === 'domain' && isRoot) {
+          suffix = '-colored2'
+        } else {
+          suffix = colored ? '-colored' : ''
+        }
+        return require(`@/assets/img/entity-symbol2/${entityType}${suffix}.svg`)
+      }
+    },
+    bindEvents () {
+      const _this = this
+      this.graph.on('node:dragstart', (e) => {
+        _this.graph.layout()
+        refreshDraggedNodePosition(e)
+      })
+      this.graph.on('node:drag', function (e) {
+        refreshDraggedNodePosition(e)
+      })
+      this.graph.on('node:dragend', function (e) {
+        e.item.get('model').fx = null
+        e.item.get('model').fy = null
+      })
+      this.graph.on('node:click', async function (e) {
+        const node = e.item
+        const nodeModel = node.get('model')
+        if (nodeModel.type !== 'tempNode') {
+          _this.rightBox.show = true
+          node.setState('mySelected', true)
+          _this.cleanTempNodesAndTempEdges()
+          // 点击entityNode，查询数据，并根据数据生成tempNode
+          if (nodeModel.type === nodeType.entityNode) {
+            _this.rightBox.loading = true
+            try {
+              // 若已查过数据，不重复查询
+              if (!nodeModel.myData.relatedEntity) {
+                await nodeModel.queryDetailData()
+              }
+              let change = false
+              Object.keys(nodeModel.myData.relatedEntity).forEach(k => {
+                if (nodeModel.myData.relatedEntity[k].total) {
+                  // 若已有同级同类型的listNode，不生成此tempNode
+                  const neighbors = _this.graph.getNeighbors(nodeModel.id, 'target')
+                  const hasListNode = neighbors.some(b => b.get('model').myData.entityType === k)
+                  if (!hasListNode) {
+                    change = true
+                    const tempNode = new Node(
+                      nodeType.tempNode,
+                      `${nodeModel.id}__${k}__temp`,
+                      {
+                        entityType: k,
+                        ...generateTempNodeCoordinate(nodeModel.sourceNode, e)
+                      },
+                      nodeModel
+                    )
+                    const tempEdge = new Edge(nodeModel, tempNode, 'temp')
+                    _this.graph.addItem('node', tempNode)
+                    _this.graph.addItem('edge', tempEdge)
+                  }
+                }
+              })
+              change && _this.graph.layout()
+              _this.rightBox.node = _.cloneDeep(nodeModel)
+              _this.rightBox.mode = 'detail'
+            } catch (e) {
+              _this.$message.error(_this.errorMsgHandler(e))
+            } finally {
+              _this.rightBox.loading = false
+            }
+          } else if (nodeModel.type === nodeType.listNode) {
+            _this.rightBox.node = _.cloneDeep(nodeModel)
+            _this.rightBox.mode = 'list'
+          } else if (nodeModel.type === nodeType.rootNode) {
+            _this.rightBox.node = _.cloneDeep(nodeModel)
+            _this.rightBox.mode = 'detail'
+          }
+        } else {
+          // 点击tempNode，根据source生成listNode和entityNode以及对应的edge。查完entityNode的接口再删除临时node和edge。
+          // 若已达第六层，则只生成listNode，不再展开entityNode
+          const nodes = []
+          const edges = []
+          const listNode = new Node(
+            nodeType.listNode,
+            `${nodeModel.sourceNode.id}__${nodeModel.myData.entityType}-list`,
+            {
+              entityType: nodeModel.myData.entityType,
+              x: nodeModel.x,
+              y: nodeModel.y
+            },
+            nodeModel.sourceNode
+          )
+          nodes.push(listNode)
+          edges.push(new Edge(nodeModel.sourceNode, listNode))
+
+          // 判断listNode的sourceNode层级，若大于等于10（即第6层listNode），则不继续拓展entity node，并给用户提示。否则拓展entity node
+          const level = _this.getNodeLevel(listNode.sourceNode.id)
+          if (level < 10) {
+            _this.rightBox.loading = true
+            try {
+              const entities = await queryRelatedEntity(nodeModel.sourceNode, listNode.myData.entityType)
+              nodeModel.sourceNode.myData.relatedEntity[listNode.myData.entityType].list.push(...entities.list)
+              entities.list.forEach(entity => {
+                const entityNode = new Node(nodeType.entityNode, entity.vertex, {
+                  entityType: listNode.myData.entityType,
+                  entityName: entity.vertex,
+                  x: e.x + Math.random() * 100 - 50,
+                  y: e.y + Math.random() * 100 - 50
+                }, listNode)
+                nodes.push(entityNode)
+                edges.push(new Edge(listNode, entityNode))
+              })
+            } catch (e) {
+              _this.$message.error(_this.errorMsgHandler(e))
+            } finally {
+              _this.rightBox.loading = false
+            }
+          } else {
+            this.$message.warning(this.$t('tip.maxExpandDepth'))
+          }
+          _this.addItems(nodes, edges)
+          _this.cleanTempNodesAndTempEdges()
+          _this.graph.layout()
+          // 手动高亮listNode
+          const _listNode = _this.graph.findById(listNode.id)
+          _this.graph.emit('node:click', { item: _listNode, target: _listNode.getKeyShape() })
+          if (_this.stackData.justUndo) {
+            _this.stackData.justUndo = false
+            _this.stackData.redo = []
+          }
+          if (_this.stackData.justRedo) {
+            _this.stackData.justRedo = false
+            _this.stackData.redo = []
+          }
+        }
+      })
+      this.graph.on('node:mouseenter', function (e) {
+        e.item.setState('hover', true)
+      })
+      this.graph.on('node:mouseleave', function (e) {
+        e.item.setState('hover', false)
+      })
+      function refreshDraggedNodePosition (e) {
+        const model = e.item.get('model')
+        model.fx = e.x
+        model.fy = e.y
+      }
+      function generateTempNodeCoordinate (sourceNode, event) {
+        const sx = sourceNode.x
+        const sy = sourceNode.y
+        const cx = event.x
+        const cy = event.y
+        return {
+          x: cx + cx - sx + Math.random() * 30 - 15,
+          y: cy + cy - sy + Math.random() * 30 - 15
+        }
+      }
+    },
+    addItems (nodes = [], edges = [], stack = true) {
+      // 过滤掉已经存在的node
+      const _nodes = nodes.filter(n => {
+        return !this.graph.findById(n.id)
+      })
+      _nodes.forEach(n => {
+        this.graph.addItem('node', n)
+      })
+      edges.forEach(e => {
+        this.graph.addItem('edge', e)
+      })
+      if (stack) {
+        this.stackData.undo.push({ nodes: _nodes, edges })
+      }
+    },
+    setItemsStata (models = [], stateName, state) {
+      models.forEach(m => {
+        this.graph.setItemState(this.graph.findById(m.id), stateName, state)
+      })
+    },
+    cleanTempNodesAndTempEdges () {
+      // 清除现有tempNode和tempEdge
+      const tempNodes = this.graph.findAll('node', node => node.get('model').type === nodeType.tempNode)
+      tempNodes.forEach(n => {
+        this.graph.removeItem(n)
+      })
+      const tempEdges = this.graph.findAll('edge', edge => edge.get('model').isTemp)
+      tempEdges.forEach(n => {
+        this.graph.removeItem(n)
+      })
+    },
+    async generateInitialData () {
+      const nodes = []
+      const edges = []
+      // 生成rootNode，并查询相关数据
+      const { offsetWidth, offsetHeight } = document.getElementById('entityGraph')
+      const coordinate = {
+        rootNode: {
+          fx: offsetWidth * 0.4,
+          fy: offsetHeight * 0.3 - 20
+        }
+      }
+      coordinate.ipListNode = {
+        fx: coordinate.rootNode.fx + 200,
+        fy: coordinate.rootNode.fy
+      }
+      coordinate.domainListNode = {
+        fx: coordinate.rootNode.fx + 100,
+        fy: coordinate.rootNode.fy + 173
+      }
+      coordinate.appListNode = {
+        fx: coordinate.rootNode.fx - 100,
+        fy: coordinate.rootNode.fy + 173
+      }
+      const rootNode = new Node(nodeType.rootNode, this.entity.entityName, {
+        entityType: this.entity.entityType,
+        entityName: this.entity.entityName
+        /* x: coordinate.rootNode.fx,
+        y: coordinate.rootNode.fy */
+      })
+      await rootNode.queryDetailData()
+      nodes.push(rootNode)
+
+      // 生成listNode和entityNode及edge
+      if (rootNode.myData.relatedEntity) {
+        // listNode
+        const listNodes = []
+        const keys = Object.keys(rootNode.myData.relatedEntity)
+        keys.forEach(k => {
+          if (rootNode.myData.relatedEntity[k].total) {
+            const listNode = new Node(
+              nodeType.listNode,
+              `${rootNode.id}__${k}-list`,
+              {
+                entityType: k
+                /* x: coordinate[`${k}ListNode`].fx,
+                y: coordinate[`${k}ListNode`].fy */
+              },
+              rootNode
+            )
+            listNodes.push(listNode)
+            edges.push(new Edge(rootNode, listNode))
+          }
+        })
+        // entityNode
+        const entityNodes = []
+        for (const node of listNodes) {
+          const entities = await queryRelatedEntity(rootNode, node.myData.entityType)
+          rootNode.myData.relatedEntity[node.myData.entityType].list = entities.list
+          entities.list.forEach(entity => {
+            const entityNode = new Node(
+              nodeType.entityNode,
+              entity.vertex,
+              {
+                entityType: node.myData.entityType,
+                entityName: entity.vertex
+              },
+              node
+            )
+            entityNodes.push(entityNode)
+            edges.push(new Edge(node, entityNode))
+          })
+        }
+        nodes.push(...listNodes, ...entityNodes)
+      }
+      return {
+        nodes: nodes,
+        edges: edges
+      }
+    },
+    getNodeLevel (id) {
+      const { findShortestPath } = Algorithm
+      const info = findShortestPath(this.graph.save(), this.entity.entityName, id)
+      return info.length
+    },
+    onCloseBlock () {
+      this.rightBox.mode = ''
+      this.rightBox.show = false
+    },
+    buildTooltip () {
+      const _this = this
+      return new G6.Tooltip({
+        offsetX: 10,
+        offsetY: 20,
+        itemTypes: ['node'],
+        getContent (e) {
+          const node = e.item.getModel()
+          if (node.type === nodeType.listNode) {
+            let iconClass = ''
+            let title = ''
+            let total = 0
+            let loadedCount = 0
+            switch (node.myData.entityType) {
+              case 'ip': {
+                iconClass = 'cn-icon cn-icon-resolve-ip'
+                title = _this.$t('entities.graph.resolveIp')
+                total = _.get(node.sourceNode.myData, 'relatedEntity.ip.total', 0)
+                loadedCount = _.get(node.sourceNode.myData, 'relatedEntity.ip.list', []).length
+                break
+              }
+              case 'domain': {
+                iconClass = 'cn-icon cn-icon-subdomain'
+                title = node.isSubdomain() ? _this.$t('entities.subdomain') : _this.$t('entity.graph.resolveDomain')
+                total = _.get(node.sourceNode.myData, 'relatedEntity.domain.total', 0)
+                loadedCount = _.get(node.sourceNode.myData, 'relatedEntity.domain.list', []).length
+                break
+              }
+              case 'app': {
+                iconClass = 'cn-icon cn-icon-app-name'
+                title = _this.$t('entities.tab.relatedApp')
+                total = _.get(node.sourceNode.myData, 'relatedEntity.app.total', 0)
+                loadedCount = _.get(node.sourceNode.myData, 'relatedEntity.app.list', []).length
+                break
+              }
+            }
+            return `<div class="primary-node-tooltip">
+              <div class="tooltip__header"><i class="${iconClass}"></i><span class="tooltip__title">${title}</span></div>
+              <div class="tooltip__content">
+                <span>${_this.$t('entity.graph.associatedCount')}:&nbsp;${total}</span>
+                <span>${_this.$t('entity.graph.expandedEntityCount')}:&nbsp;${loadedCount}</span>
+              </div>
+            </div>`
+          } else if (node.type === nodeType.entityNode || node.type === nodeType.rootNode) {
+            if (node.myData && node.myData.tags && node.myData.tags.length > 0) {
+              return `<div class="entity-node-tooltip">
+                <div class="tooltip__header">
+                  <span class="tooltip__title">${node.id}</span>
+                </div>
+                <div class="tooltip__content">
+                  <div class="content-header">
+                    <div class="header-icon"></div>
+                    <span>${_this.$t('entity.graph.tags')}</span>
+                  </div>
+                  <div class="content-tag-list">${generateTagHTML(node.myData.tags)}</div>
+                </div>
+              </div>`
+            } else {
+              return `<div style="padding: 0 6px; font-size: 15px; line-height: 15px; color: #111;">${node.id}</div>`
+            }
+          } else if (node.type === nodeType.tempNode) {
+            return node.label
+          }
+          function generateTagHTML (tags) {
+            let html = ''
+            if (tags) {
+              tags.forEach(t => {
+                html += `<div class="entity-tag entity-tag--level-two-${t.type}">
+                  <span>${t.value}</span>
+                </div>`
+              })
+            }
+            return html
+          }
+        }
+      })
+    },
+    buildToolbar () {
+      const tc = document.createElement('div')
+      tc.id = 'toolbarContainer'
+      tc.className = 'graph-toolbar'
+      document.body.appendChild(tc)
+      const toolbar = new G6.ToolBar({
+        container: tc,
+        className: 'toolbar__tools',
+        getContent: () => {
+          return `<ul>
+            <li code='zoomOut' title="${this.$t('overall.zoomOut')}"><i class="cn-icon cn-icon-zoom-out"></i></li>
+            <li code='zoomIn' title="${this.$t('overall.zoomIn')}"><i class="cn-icon cn-icon-zoom-in"></i></li>
+            <li code='autoZoom' title="${this.$t('overall.autoZoom')}"><i class="cn-icon cn-icon-reset"></i></li>
+            <li code='undo' title="${this.$t('overall.preStep')}" id="preStep" class="toolbar--unactivated"><i class="cn-icon cn-icon-pre-step"></i></li>
+            <li code='redo' title="${this.$t('overall.nextStep')}" id="nextStep" class="toolbar--unactivated"><i class="cn-icon cn-icon-next-step"></i></li>
+            <li code='toDefault' title="${this.$t('overall.reset')}"><i class="cn-icon cn-icon-to-default"></i></li>
+          </ul>`
+        },
+        handleClick: (code, graph) => {
+          if (code === 'undo') {
+            const data = this.stackData.undo.pop()
+            this.stackData.justUndo = true
+            data.nodes.forEach(n => {
+              if (n.type === nodeType.listNode) {
+                const listNode = this.graph.findById(n.id)
+                const listNodeEdges = listNode.getEdges()
+                listNodeEdges.forEach(e => {
+                  e.setState('mySelected', false)
+                })
+                listNode.setState('mySelected', false)
+              }
+              this.graph.removeItem(n.id)
+            })
+            data.edges.forEach(e => {
+              this.graph.removeItem(e.id)
+            })
+            this.stackData.redo.push(data)
+            if (this.stackData.justRedo) {
+              this.stackData.justRedo = false
+            }
+            this.cleanTempNodesAndTempEdges()
+            this.graph.layout()
+            this.onCloseBlock()
+          } else if (code === 'redo') {
+            const data = this.stackData.redo.pop()
+            this.stackData.justRedo = true
+            this.addItems(data.nodes, data.edges)
+            // this.stackData.undo.push(data)
+            if (this.stackData.justUndo) {
+              this.stackData.justUndo = false
+            }
+            this.cleanTempNodesAndTempEdges()
+            this.graph.layout()
+            this.onCloseBlock()
+          } else if (code === 'autoZoom') {
+            this.graph.zoomTo(1)
+            this.graph.fitCenter()
+          } else if (code === 'zoomOut') {
+            this.graph.zoomTo(this.graph.getZoom() + 0.2, this.center)
+          } else if (code === 'zoomIn') {
+            const currentZoom = this.graph.getZoom()
+            this.graph.zoomTo(currentZoom - 0.2, this.center)
+          } else {
+            this.graph.clear()
+            this.graph.data(this.initialData)
+            this.graph.render()
+            this.stackData = {
+              undo: [],
+              redo: [],
+              justUndo: false,
+              justRedo: false
+            }
+            const rootNode = this.graph.findById(this.entity.entityName)
+            this.graph.emit('node:click', { item: rootNode, target: rootNode.getKeyShape() }) // 手动触发rootNode的点击事件
+          }
+        }
+      })
+      return toolbar
+    },
+    async expandList (nodeId) {
+      const node = this.graph.findById(nodeId)
+      const model = node.getModel()
+      const sourceNode = this.graph.findById(model.sourceNode.id)
+      const sourceModel = sourceNode.getModel()
+      const expandType = model.myData.entityType
+      if (sourceModel.myData.relatedEntity[expandType].list.length >= sourceModel.myData.relatedEntity[expandType].total) {
+        return
+      }
+      if (sourceModel.myData.relatedEntity[expandType].list.length < 50) {
+        this.rightBox.loading = true
+        try {
+          const entities = await queryRelatedEntity(sourceModel, expandType)
+          sourceModel.myData.relatedEntity[expandType].list.push(...entities.list)
+          const entityNodeModels = []
+          const edgeModels = []
+          entities.list.forEach(entity => {
+            const entityNodeModel = new Node(nodeType.entityNode, entity.vertex, {
+              entityType: expandType,
+              entityName: entity.vertex,
+              x: model.x + Math.random() * 500 - 250,
+              y: model.y + Math.random() * 500 - 250
+            }, model)
+            entityNodeModels.push(entityNodeModel)
+
+            const edge = new Edge(model, entityNodeModel)
+            edgeModels.push(edge)
+          })
+          this.addItems(entityNodeModels, edgeModels)
+          this.setItemsStata(edgeModels, 'mySelected', true)
+          this.graph.layout()
+          this.rightBox.node = _.cloneDeep(model)
+        } catch (e) {
+          this.$message.error(this.errorMsgHandler(e))
+        } finally {
+          this.rightBox.loading = false
+        }
+      } else {
+        this.$message.warning(this.$t('tip.maxExpandCount'))
+      }
+    },
+    async expandDetailList (nodeId, expandType) {
+      const node = this.graph.findById(nodeId)
+      if (node) {
+        const nodeModel = node.getModel()
+        if (nodeModel.myData.relatedEntity[expandType].list.length >= nodeModel.myData.relatedEntity[expandType].total) {
+          return
+        }
+        if (nodeModel.myData.relatedEntity[expandType].list.length < 50) {
+          const toAddNodeModels = []
+          const toAddEdgeModels = []
+
+          this.rightBox.loading = true
+          try {
+            const entities = await queryRelatedEntity(nodeModel, expandType)
+            nodeModel.myData.relatedEntity[expandType].list.push(...entities.list)
+            const neighbors = node.getNeighbors('target')
+            const listNode = neighbors.find(n => n.getModel().myData.entityType === expandType)
+            let listNodeModel = listNode.getModel()
+            let listEdgeModel
+            // 如果listNode是tempNode，移除，并新建listNode
+            if (listNodeModel.type === nodeType.tempNode) {
+              // 移除tempNode和tempEdge
+              const tempEdges = listNode.getInEdges()
+              tempEdges.forEach(edge => {
+                this.graph.removeItem(edge)
+              })
+              this.graph.removeItem(listNode)
+
+              listNodeModel = new Node(nodeType.listNode, `${nodeModel.id}__${expandType}-list`, { entityType: expandType, x: listNodeModel.x, y: listNodeModel.y }, nodeModel)
+              listEdgeModel = new Edge(nodeModel, listNodeModel)
+              toAddNodeModels.push(listNodeModel)
+              toAddEdgeModels.push(listEdgeModel)
+            }
+            entities.list.forEach(entity => {
+              const entityNodeModel = new Node(nodeType.entityNode, entity.vertex, {
+                entityType: expandType,
+                entityName: entity.vertex,
+                x: listNodeModel.x + Math.random() * 500 - 250,
+                y: listNodeModel.y + Math.random() * 500 - 250
+              }, listNodeModel)
+              toAddNodeModels.push(entityNodeModel)
+              toAddEdgeModels.push(new Edge(listNodeModel, entityNodeModel))
+            })
+            this.addItems(toAddNodeModels, toAddEdgeModels)
+            if (listEdgeModel) {
+              this.graph.setItemState(this.graph.findById(listEdgeModel.id), 'mySelected', true)
+            }
+            this.graph.layout()
+            this.rightBox.node = _.cloneDeep(nodeModel)
+          } catch (e) {
+            this.$message.error(this.errorMsgHandler(e))
+          } finally {
+            this.rightBox.loading = false
+          }
+        } else {
+          this.$message.warning(this.$t('tip.maxExpandCount'))
+        }
+      }
+    },
+    resize () {
+      const container = document.getElementById('entityGraph')
+      this.graph.changeSize(container.offsetWidth, container.offsetHeight)
+    }
+  },
+  watch: {
+    stackData: {
+      deep: true,
+      handler (n) {
+        if (n) {
+          if (n.undo.length > 0) {
+            document.getElementById('preStep').classList.remove('toolbar--unactivated')
+          } else {
+            document.getElementById('preStep').classList.add('toolbar--unactivated')
+          }
+          if (n.redo.length > 0) {
+            document.getElementById('nextStep').classList.remove('toolbar--unactivated')
+          } else {
+            document.getElementById('nextStep').classList.add('toolbar--unactivated')
+          }
+        }
+      }
+    }
+  },
+  async mounted () {
+    if (this.entity.entityType && this.entity.entityName) {
+      await this.init()
+    }
+    this.debounceFunc = this.$_.debounce(this.resize, 300)
+    window.addEventListener('resize', this.debounceFunc)
+  },
+  unmounted () {
+    window.removeEventListener('resize', this.debounceFunc)
+    this.graph.destroy()
+  },
+  setup () {
+    const route = useRoute()
+    const { entityType, entityName } = route.query
+    const entity = {
+      entityType,
+      entityName
+    }
+    // 关系图
+    const graph = shallowRef(null)
+
+    const rightBox = ref({
+      mode: 'detail', // list | detail
+      show: true,
+      node: null,
+      loading: true
+    })
+    return {
+      entity,
+      rightBox,
+      graph
+    }
+  }
+}
+</script>
diff --git a/src/views/entityExplorer/entityGraph/GraphEntityDetail.vue b/src/views/entityExplorer/entityGraph/GraphEntityDetail.vue
index dff3acbc..6d0c2502 100644
--- a/src/views/entityExplorer/entityGraph/GraphEntityDetail.vue
+++ b/src/views/entityExplorer/entityGraph/GraphEntityDetail.vue
@@ -8,7 +8,7 @@
         <div class="entity-graph-type">{{entityTypeName}}</div>
         <div class="graph-basic-info">
           <div class="graph-basic-info-name__block">
-            <div class="graph-basic-info-name" :title="$_.get(node, 'id', '')" id="entityName">{{ $_.get(node, 'id', '') }}</div>
+            <div class="graph-basic-info-name" :title="$_.get(node, 'realId', '')" id="entityName">{{ $_.get(node, 'realId', '') }}</div>
             <div class="graph-basic-info-icon" @click="copyEntityName">
               <i class="cn-icon cn-icon-copy"></i>
             </div>
@@ -75,7 +75,7 @@
   </div>
 
   <!--标签-->
-  <div v-if="$_.get(node, 'myData.tags', []).length > 0" class="digital-certificate graph-basic-info__block">
+  <div v-if="$_.get(node, 'data.tags', []).length > 0" class="digital-certificate graph-basic-info__block">
     <div class="digital-certificate-header padding-b-10">
       <div class="digital-certificate-header__icon graph-header__icon"></div>
       <div class="graph-basic-info__block-title">
@@ -85,7 +85,7 @@
 
     <div class="entity-detail graph-basic-info__block-content">
       <div class="graph-tag-list">
-        <div v-for="ic in $_.get(node, 'myData.tags', [])" :key="ic.value">
+        <div v-for="ic in $_.get(node, 'data.tags', [])" :key="ic.value">
           <div class="entity-tag graph-tag-item" :class="`entity-tag--level-two-${ic.type}`" :style="getTagColor(ic.color)">
             <span>{{ic.value}}</span>
           </div>
@@ -126,13 +126,13 @@ export default {
   computed: {
     iconClass () {
       let className
-      switch (_.get(this.node, 'myData.entityType', '')) {
+      switch (_.get(this.node, 'data.entityType', '')) {
         case ('ip'): {
-          className = 'cn-icon cn-icon-ip2'
+          className = 'cn-icon cn-icon-resolve-ip'
           break
         }
         case ('domain'): {
-          className = 'cn-icon cn-icon-domain2'
+          className = 'cn-icon cn-icon-subdomain'
           break
         }
         case ('app'): {
@@ -145,7 +145,7 @@ export default {
       return className
     },
     entityTypeName () {
-      const type = _.get(this.node, 'myData.entityType', '')
+      const type = _.get(this.node, 'data.entityType', '')
       let entityTypeName = '-'
       switch (type) {
         case ('ip'): {
@@ -270,59 +270,59 @@ export default {
     },
     handleDetailData (node) {
       const n = node
-      const type = _.get(n, 'myData.entityType', '')
+      const type = _.get(n, 'data.entityType', '')
       switch (type) {
         case 'ip': {
           this.detailCards = [
-            { name: 'asn', label: this.$t('entities.asNumber'), value: _.get(n, 'myData.basicInfo.asn.asn', '-') },
+            { name: 'asn', label: this.$t('entities.asNumber'), value: _.get(n, 'data.basicInfo.asn.asn', '-') },
             {
               name: 'asOrg',
               label: this.$t('entities.asOrg'),
-              value: _.get(n.myData, 'basicInfo.asn.organization', '-')
+              value: _.get(n.data, 'basicInfo.asn.organization', '-')
             },
             {
               name: 'isp',
               label: this.$t('entities.graph.isp'),
-              value: _.get(n.myData, 'basicInfo.location.isp', '-')
+              value: _.get(n.data, 'basicInfo.location.isp', '-')
             },
-            { name: 'location', label: this.$t('overall.location'), value: this.location(n.myData) }
+            { name: 'location', label: this.$t('overall.location'), value: this.location(n.data) }
           ]
           this.relationList = [
             {
               icon: 'cn-icon cn-icon-subdomain',
               name: 'domain',
               label: this.$t('entity.graph.resolveDomain'),
-              value: _.get(n.myData, 'relatedEntity.domain.list', []).length,
-              total: _.get(n.myData, 'relatedEntity.domain.total', 0) || 0
+              value: _.get(n.data, 'relatedEntities.domain.list', []).length,
+              total: _.get(n.data, 'relatedEntities.domain.total', 0) || 0
             },
             {
               icon: 'cn-icon cn-icon-app-name',
               name: 'app',
               label: this.$t('entities.tab.relatedApp'),
-              value: _.get(n.myData, 'relatedEntity.app.list', []).length,
-              total: _.get(n.myData, 'relatedEntity.app.total', '0') || 0
+              value: _.get(n.data, 'relatedEntities.app.list', []).length,
+              total: _.get(n.data, 'relatedEntities.app.total', '0') || 0
             }
           ]
           break
         }
         case 'domain': {
-          const expireDate = _.get(n.myData, 'basicInfo.whois.expireDate', '')
-          const createDate = _.get(n.myData, 'basicInfo.whois.createDate', '')
+          const expireDate = _.get(n.data, 'basicInfo.whois.expireDate', '')
+          const createDate = _.get(n.data, 'basicInfo.whois.createDate', '')
           this.detailCards = [
             {
               name: 'categoryName',
               label: this.$t('entities.category'),
-              value: _.get(n.myData, 'basicInfo.category.categoryName', '-')
+              value: _.get(n.data, 'basicInfo.category.categoryName', '-')
             },
             {
               name: 'categoryGroup',
               label: this.$t('entities.group'),
-              value: _.get(n.myData, 'basicInfo.category.categoryGroup', '-')
+              value: _.get(n.data, 'basicInfo.category.categoryGroup', '-')
             },
             {
               name: 'reputationLevel',
               label: this.$t('entities.creditLevel2'),
-              value: _.get(n.myData, 'basicInfo.category.reputationLevel', '-')
+              value: _.get(n.data, 'basicInfo.category.reputationLevel', '-')
             },
             {
               name: 'expireDate',
@@ -332,17 +332,17 @@ export default {
             {
               name: 'registrarName',
               label: this.$t('entities.registrar'),
-              value: _.get(n.myData, 'basicInfo.whois.registrarName', '-')
+              value: _.get(n.data, 'basicInfo.whois.registrarName', '-')
             },
             {
               name: 'registrantOrg',
               label: this.$t('entities.registry'),
-              value: _.get(n.myData, 'basicInfo.whois.registrantOrg', '-')
+              value: _.get(n.data, 'basicInfo.whois.registrantOrg', '-')
             },
             {
               name: 'registrantCountry',
               label: this.$t('entities.registrationCountry'),
-              value: _.get(n.myData, 'basicInfo.whois.registrantCountry', '-')
+              value: _.get(n.data, 'basicInfo.whois.registrantCountry', '-')
             },
             {
               name: 'createDate',
@@ -352,7 +352,7 @@ export default {
             {
               name: 'email',
               label: this.$t('entities.registryEmail'),
-              value: _.get(n.myData, 'basicInfo.whois.email', '-')
+              value: _.get(n.data, 'basicInfo.whois.email', '-')
             }
           ]
           this.relationList = [
@@ -360,22 +360,22 @@ export default {
               icon: 'cn-icon cn-icon-resolve-ip',
               name: 'ip',
               label: this.$t('entities.graph.resolveIp'),
-              value: _.get(n.myData, 'relatedEntity.ip.list', []).length,
-              total: _.get(n.myData, 'relatedEntity.ip.total', '0') || 0
+              value: _.get(n.data, 'relatedEntities.ip.list', []).length,
+              total: _.get(n.data, 'relatedEntities.ip.total', '0') || 0
             },
             {
               icon: 'cn-icon cn-icon-subdomain',
               name: 'domain',
               label: this.$t('entities.subdomain'),
-              value: _.get(n.myData, 'relatedEntity.domain.list', []).length,
-              total: _.get(n.myData, 'relatedEntity.domain.total', '0') || 0
+              value: _.get(n.data, 'relatedEntities.domain.list', []).length,
+              total: _.get(n.data, 'relatedEntities.domain.total', '0') || 0
             },
             {
               icon: 'cn-icon cn-icon-app-name',
               name: 'app',
               label: this.$t('entities.tab.relatedApp'),
-              value: _.get(n.myData, 'relatedEntity.app.list', []).length,
-              total: _.get(n.myData, 'relatedEntity.app.total', 0) || 0
+              value: _.get(n.data, 'relatedEntities.app.list', []).length,
+              total: _.get(n.data, 'relatedEntities.app.total', 0) || 0
             }
           ]
           break
@@ -385,32 +385,32 @@ export default {
             {
               name: 'appCategory',
               label: this.$t('entities.category'),
-              value: _.get(n.myData, 'basicInfo.category.appCategory', '-')
+              value: _.get(n.data, 'basicInfo.category.appCategory', '-')
             },
             {
               name: 'appSubcategory',
               label: this.$t('entities.subcategory'),
-              value: _.get(n.myData, 'basicInfo.category.appSubcategory', '-')
+              value: _.get(n.data, 'basicInfo.category.appSubcategory', '-')
             },
             {
               name: 'appRisk',
               label: this.$t('entities.riskLevel'),
-              value: this.appRisk(_.get(n.myData, 'basicInfo.category.appRisk', '-'))
+              value: this.appRisk(_.get(n.data, 'basicInfo.category.appRisk', '-'))
             },
             {
               name: 'appTechnology',
               label: this.$t('overall.technology'),
-              value: _.get(n.myData, 'basicInfo.category.appTechnology', '-')
+              value: _.get(n.data, 'basicInfo.category.appTechnology', '-')
             },
             {
               name: 'appLongname',
               label: this.$t('overall.appFullName'),
-              value: _.get(n.myData, 'basicInfo.category.appLongname', '-')
+              value: _.get(n.data, 'basicInfo.category.appLongname', '-')
             },
             {
               name: 'appDescription',
               label: this.$t('config.dataSource.description'),
-              value: _.get(n.myData, 'basicInfo.category.appDescription', '-')
+              value: _.get(n.data, 'basicInfo.category.appDescription', '-')
             }
           ]
 
@@ -419,15 +419,15 @@ export default {
               icon: 'cn-icon cn-icon-resolve-ip',
               name: 'ip',
               label: this.$t('entities.tab.relatedIp'),
-              value: _.get(n.myData, 'relatedEntity.ip.list', []).length,
-              total: _.get(n.myData, 'relatedEntity.ip.total', '0') || 0
+              value: _.get(n.data, 'relatedEntities.ip.list', []).length,
+              total: _.get(n.data, 'relatedEntities.ip.total', '0') || 0
             },
             {
               icon: 'cn-icon cn-icon-subdomain',
               name: 'domain',
               label: this.$t('entities.graph.relatedDomain'),
-              value: _.get(n.myData, 'relatedEntity.domain.list', []).length,
-              total: _.get(n.myData, 'relatedEntity.domain.total', '0') || 0
+              value: _.get(n.data, 'relatedEntities.domain.list', []).length,
+              total: _.get(n.data, 'relatedEntities.domain.total', '0') || 0
             }
           ]
         }
diff --git a/src/views/entityExplorer/entityGraph/GraphEntityList.vue b/src/views/entityExplorer/entityGraph/GraphEntityList.vue
index 1d377e7a..8b730671 100644
--- a/src/views/entityExplorer/entityGraph/GraphEntityList.vue
+++ b/src/views/entityExplorer/entityGraph/GraphEntityList.vue
@@ -4,11 +4,11 @@
     <div class="graph-list-header">
       <div>
         <div class="graph-list-header-title">
-          <i class="cn-icon cn-icon-resolve-ip graph-list-header-icon"></i>
+          <i :class="`${iconClass} graph-list-header-icon`"></i>
           <span>{{ title }}</span>
         </div>
         <div class="graph-list-header-number">
-          {{ $t('entity.graph.associatedCount') }}:&nbsp;<span>{{$_.get(node, 'sourceNode.myData.relatedEntity.' + $_.get(node, 'myData.entityType') + '.total', '-')}}</span>
+          {{ $t('entity.graph.associatedCount') }}:&nbsp;<span>{{$_.get(node, 'sourceNode.data.relatedEntities.' + $_.get(node, 'data.entityType') + '.total', '-')}}</span>
         </div>
       </div>
 
@@ -16,10 +16,10 @@
     </div>
 
     <div class="graph-list-expand-btn-block">
-      <div class="graph-list-expand-btn graph-list-expand-btn__display" :class="{ 'graph-list-expand-btn--disabled': expandBtnDisable }" @click="expandList">
+      <span class="graph-list-expand-btn" :class="{ 'graph-list-expand-btn--disabled': expandBtnDisable }" @click="expandList">
           <i class="cn-icon cn-icon-expand-continue graph-expand-continue"></i>
         {{ $t('entity.graph.continueToExpand') }}
-      </div>
+      </span>
     </div>
 
     <div>
@@ -28,14 +28,14 @@
           <div class="digital-certificate-header__icon graph-header__icon"></div>
           <div class="graph-list-content-header ">
             {{ $t('entity.graph.expandedEntityCount') }}:&nbsp
-            <span>{{$_.get(node, 'sourceNode.myData.relatedEntity.' + $_.get(node, 'myData.entityType') + '.list', []).length}}</span>
+            <span>{{$_.get(node, 'sourceNode.data.relatedEntities.' + $_.get(node, 'data.entityType') + '.list', []).length}}</span>
           </div>
         </div>
 
         <div class="graph-list-content">
-          <div v-for="(item, index) in $_.get(node, 'sourceNode.myData.relatedEntity.' + $_.get(node, 'myData.entityType') + '.list', [])" :key="index">
+          <div v-for="(item, index) in $_.get(node, 'sourceNode.data.relatedEntities.' + $_.get(node, 'data.entityType') + '.list', [])" :key="index">
             <div class="graph-list-item-ip"><span @click="expandDetail">{{ item.vertex }}</span></div>
-            <template v-if="$_.get(node, 'myData.entityType', '') === 'ip'">
+            <template v-if="$_.get(node, 'data.entityType', '') === 'ip'">
               <div class="graph-list-item-block">
                 <div class="graph-list-item padding-b-4">
                   <div class="graph-list-item-label">{{ $t('overall.location') }}:</div>
@@ -54,7 +54,7 @@
                 </div>
               </div>
             </template>
-            <template v-else-if="$_.get(node, 'myData.entityType', '') === 'domain'">
+            <template v-else-if="$_.get(node, 'data.entityType', '') === 'domain'">
               <div class="graph-list-item-block">
                 <div class="graph-list-item__app">
                   <div class="graph-list-item-label__app">{{$t('entities.category')}}:</div>
@@ -74,7 +74,7 @@
                 </div>
               </div>
             </template>
-            <template v-else-if="$_.get(node, 'myData.entityType', '') === 'app'">
+            <template v-else-if="$_.get(node, 'data.entityType', '') === 'app'">
               <div class="graph-list-item-block">
                 <div class="graph-list-item__app">
                   <div class="graph-list-item-label__app">APP ID:</div>
@@ -98,7 +98,7 @@
                 </div>
               </div>
             </template>
-            <div class="graph-list-dividing-line" v-if="index !== $_.get(node, 'sourceNode.myData.relatedEntity.' + $_.get(node, 'myData.entityType') + '.list', []).length - 1"></div>
+            <div class="graph-list-dividing-line" v-if="index !== $_.get(node, 'sourceNode.data.relatedEntities.' + $_.get(node, 'data.entityType') + '.list', []).length - 1"></div>
           </div>
         </div>
       </div>
@@ -132,8 +132,8 @@ export default {
   },
   computed: {
     expandBtnDisable () {
-      const loaded = _.get(this.node, 'sourceNode.myData.relatedEntity.' + _.get(this.node, 'myData.entityType') + '.list', []).length
-      const total = _.get(this.node, 'sourceNode.myData.relatedEntity.' + _.get(this.node, 'myData.entityType') + '.total', 0)
+      const loaded = _.get(this.node, 'sourceNode.data.relatedEntities.' + _.get(this.node, 'data.entityType') + '.list', []).length
+      const total = _.get(this.node, 'sourceNode.data.relatedEntities.' + _.get(this.node, 'data.entityType') + '.total', 0)
       return !(loaded < total && total > 10 && (loaded && loaded < 50))
     },
     appRisk () {
@@ -147,9 +147,9 @@ export default {
     title () {
       let title = ''
       if (this.node) {
-        const entityType = _.get(this.node, 'myData.entityType', '')
+        const entityType = _.get(this.node, 'data.entityType', '')
         if (entityType) {
-          const sourceType = _.get(this.node, 'sourceNode.myData.entityType', '')
+          const sourceType = _.get(this.node, 'sourceNode.data.entityType', '')
           switch (entityType) {
             case 'ip': {
               if (sourceType === 'domain') {
@@ -177,6 +177,26 @@ export default {
         }
       }
       return title
+    },
+    iconClass () {
+      let className
+      switch (_.get(this.node, 'data.entityType', '')) {
+        case ('ip'): {
+          className = 'cn-icon cn-icon-resolve-ip'
+          break
+        }
+        case ('domain'): {
+          className = 'cn-icon cn-icon-subdomain'
+          break
+        }
+        case ('app'): {
+          className = 'cn-icon cn-icon-app2'
+          break
+        }
+        default:
+          break
+      }
+      return className
     }
   },
   methods: {
diff --git a/src/views/entityExplorer/entityGraph/edge.js b/src/views/entityExplorer/entityGraph/edge.js
deleted file mode 100644
index 35cede31..00000000
--- a/src/views/entityExplorer/entityGraph/edge.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import G6 from '@antv/g6'
-
-export default class Edge {
-  constructor (sourceNode, targetNode, type) {
-    this.id = sourceNode.id + '__' + targetNode.id
-    this.source = sourceNode.id
-    this.target = targetNode.id
-    this.isTemp = type === 'temp'
-    this.style = type === 'temp' ? tempStyles.style : normalStyles.style
-    this.stateStyles = type === 'temp' ? tempStyles.stateStyles : normalStyles.stateStyles
-  }
-}
-
-const normalStyles = {
-  style: {
-    stroke: '#BEBEBE',
-    endArrow: {
-      path: G6.Arrow.triangle(5, 5),
-      fill: '#BEBEBE'
-    }
-  },
-  stateStyles: {
-    mySelected: {
-      stroke: '#778391',
-      endArrow: {
-        path: G6.Arrow.triangle(5, 5),
-        fill: '#778391'
-      }
-    }
-  }
-}
-
-const tempStyles = {
-  style: {
-    endArrow: {
-      path: G6.Arrow.triangle(5, 5),
-      fill: '#DDD'
-    },
-    stroke: '#DDD',
-    lineDash: [3, 2]
-  },
-  stateStyles: {
-    mySelected: {
-      stroke: '#DDD',
-      endArrow: {
-        path: G6.Arrow.triangle(5, 5),
-        fill: '#DDD'
-      },
-      lineDash: [3, 2]
-    }
-  }
-}
diff --git a/src/views/entityExplorer/entityGraph/link.js b/src/views/entityExplorer/entityGraph/link.js
new file mode 100644
index 00000000..cc749642
--- /dev/null
+++ b/src/views/entityExplorer/entityGraph/link.js
@@ -0,0 +1,29 @@
+import { nodeType } from './node'
+
+export default class Link {
+  constructor (sourceNode, targetNode, type) {
+    this.source = sourceNode.id
+    this.target = targetNode.id
+    this.type = type || linkType.normal
+    this.strength = strengthHandler(sourceNode, targetNode)
+  }
+}
+
+function strengthHandler (sourceNode, targetNode) {
+  if (sourceNode.type === nodeType.rootNode) {
+    return 0.5
+  } else {
+    return 1
+  }
+}
+
+export const linkType = {
+  normal: 'normal',
+  temp: 'temp'
+}
+
+export const linkDistance = {
+  root: 180,
+  entityToList: 120,
+  normal: 90
+}
diff --git a/src/views/entityExplorer/entityGraph/node.js b/src/views/entityExplorer/entityGraph/node.js
index c9e41711..bf50982e 100644
--- a/src/views/entityExplorer/entityGraph/node.js
+++ b/src/views/entityExplorer/entityGraph/node.js
@@ -1,132 +1,126 @@
 import _ from 'lodash'
-import i18n from '@/i18n'
-import axios from 'axios'
-import { api } from '@/utils/api'
-import { entityDefaultColor, intentColor } from '@/utils/constants'
+import { entityDefaultColor, entityType } from '@/utils/constants'
 import { formatTags } from '@/utils/tools'
+import { generateLabel, builtTooltip, queryEntityBasicInfo, queryTags, queryRelatedEntityCount } from '@/views/entityExplorer/entityGraph/utils'
+import { api } from '@/utils/api'
+import axios from 'axios'
 
 export default class Node {
   /*
   * type: 对应nodeType
-  * cfg: { entityType, entityName, x, y, fx, fy }
+  * cfg: { entityType, entityName }
   * */
-  constructor (type, id, cfg, sourceNode) {
+  constructor (type, id, data, sourceNode, img) {
+    this.id = id + data.entityType
+    this.realId = id
     this.type = type
-    this.id = id
-    this.x = _.get(cfg, 'x', null)
-    this.y = _.get(cfg, 'y', null)
-    this.fx = _.get(cfg, 'fx', null)
-    this.fy = _.get(cfg, 'fy', null)
-    this.myData = {
-      entityType: cfg.entityType,
-      entityName: cfg.entityName
+    this.vx = 0
+    this.vy = 0
+    this.x = data.x || null
+    this.y = data.y || null
+    this.fx = data.fx || (sourceNode ? null : 0) // 设置为0，即可固定中心节点。0为中心节点，1为中心节点的子节点，2为第三级节点
+    this.fy = data.fy || (sourceNode ? null : 0) // 设置为0，即可固定中心节点。0为中心节点，1为中心节点的子节点，2为第三级节点
+    this.preDragX = null
+    this.preDragY = null
+    this.img = img
+    this.sourceNode = sourceNode
+    this.isSubdomain = sourceNode ? sourceNode.data.entityType === entityType.domain && data.entityType === entityType.domain : false
+    this.data = {
+      entityType: data.entityType,
+      entityName: data.entityName
     }
-    if (sourceNode) {
-      this.sourceNode = sourceNode
-    }
-    this.label = this.generateLabel()
-  }
+    this.label = generateLabel(type, id, data, sourceNode)
+    this.name = builtTooltip(this)
 
-  generateLabel () {
-    switch (this.type) {
+    // val 值决定鼠标触发 hover 的半径
+    switch (type) {
       case nodeType.rootNode:
-      case nodeType.entityNode: {
-        return this.id
-      }
-      case nodeType.listNode: {
-        return `${this.getLabelText()}(${_.get(this.sourceNode.myData, 'relatedEntity.' + this.myData.entityType + '.total', 0)})`
-      }
-      case nodeType.tempNode: {
-        return this.getLabelText()
-      }
-    }
-    return ''
-  }
-
-  getLabelText () {
-    if (this.myData.entityType === 'ip') {
-      if (this.sourceNode.myData.entityType === 'app') {
-        return i18n.global.t('entities.tab.relatedIp')
-      } else if (this.sourceNode.myData.entityType === 'domain') {
-        return i18n.global.t('entities.graph.resolveIp')
-      }
-    } else if (this.myData.entityType === 'domain') {
-      if (this.sourceNode.myData.entityType === 'ip') {
-        return i18n.global.t('entities.graph.resolvedDomain')
-      } else if (this.sourceNode.myData.entityType === 'app') {
-        return i18n.global.t('entities.graph.relatedDomain')
-      } else if (this.sourceNode.myData.entityType === 'domain') {
-        return i18n.global.t('entities.subdomain')
-      }
-    } else if (this.myData.entityType === 'app') {
-      return i18n.global.t('entities.tab.relatedApp')
-    }
-    return ''
-  }
-
-  isSubdomain () {
-    if (this.sourceNode) {
-      return this.sourceNode.myData.entityType === 'domain' && this.myData.entityType === 'domain'
-    } else {
-      return false
+        this.val = 19
+        break
+      case nodeType.listNode:
+        this.val = 16
+        break
+      case nodeType.entityNode:
+      case nodeType.tempNode:
+        this.val = 10
+        break
     }
   }
 
-  // 查询basicInfo、tags、关联实体数量
+  // listNode和entityNode专用，查询实体信息
   async queryDetailData () {
-    const entityType = this.myData.entityType
-    const entityName = this.myData.entityName
+    const entityType = this.data.entityType
+    const entityName = this.data.entityName
 
-    this.myData.basicInfo = await this.queryEntityBasicInfo(entityType, entityName)
+    this.data.basicInfo = await queryEntityBasicInfo(entityType, entityName)
 
-    const tags = await this.queryTags(entityType, entityName)
+    const tags = await queryTags(entityType, entityName)
     let _tags = []
     formatTags(tags, entityType, _tags)
-    if (_.isArray(tags.tags)) {
-      _tags = _.concat(_tags, tags.tags.map(tag => ({ value: tag.name, color: intentColor[tag.intent] || entityDefaultColor })))
+    if (_.isArray(tags.userDefinedTags)) {
+      _tags = _.concat(_tags, tags.userDefinedTags.map(tag => ({ value: tag.tagValue, color: tag.knowledgeBase ? tag.knowledgeBase.color : entityDefaultColor })))
     }
-    this.myData.tags = _tags
+    this.data.tags = _tags
 
-    const relatedEntityTotalCount = await this.queryRelatedEntityCount(entityType, entityName)
-    this.myData.relatedEntity = {
-      ip: { total: relatedEntityTotalCount.ipCount, list: [] },
-      domain: { total: this.myData.entityType === 'domain' ? relatedEntityTotalCount.subDomainCount : relatedEntityTotalCount.domainCount, list: [] },
-      app: { total: relatedEntityTotalCount.appCount, list: [] }
+    const relatedEntityTotalCount = await queryRelatedEntityCount(entityType, entityName)
+    this.data.relatedEntities = {
+      ip: { total: relatedEntityTotalCount.ipCount, pageNo: 0, list: [] }, //
+      domain: { total: this.data.entityType === 'domain' ? relatedEntityTotalCount.subDomainCount : relatedEntityTotalCount.domainCount, pageNo: 0, list: [] }, // pageNo: 0,
+      app: { total: relatedEntityTotalCount.appCount, pageNo: 0, list: [] }// pageNo: 0,
     }
   }
 
-  async queryEntityBasicInfo (entityType, entityName) {
-    const response = await axios.get(`${api.entity.entityGraph.basicInfo}/${entityType}?resource=${entityName}`).catch(e => {
-      console.error(e)
-      throw e
-    })
-    if (response.data && response.status === 200) {
-      return response.data.data
-    } else {
-      console.error(response)
-      throw response
-    }
-  }
-
-  async queryTags (entityType, entityName) {
-    const response = await axios.get(`${api.entity.entityGraph.tags}/${entityType}?resource=${entityName}`).catch(e => {
-      console.error(e)
-      throw e
-    })
-    if (response.data && response.status === 200) {
-      return response.data.data
-    } else {
-      console.error(response)
-      throw response
-    }
-  }
-
-  async queryRelatedEntityCount (entityType, entityName) {
-    const response = await axios.get(`${api.entity.entityGraph.relatedEntityCount}/${entityType}?resource=${entityName}`).catch(e => {
+  getNeighbors (gData) {
+    const { links } = gData
+    const neighboringNodes = []
+    const neighboringTargetNodes = []
+    const neighboringSourceNodes = []
+    const neighboringTargetLinks = []
+    const neighboringSourceLinks = []
+    const neighboringLinks = links.filter(l => {
+      if (l.target.id === this.id || l.source.id === this.id) {
+        neighboringNodes.push(l.target.id === this.id ? l.source : l.target)
+        if (l.target.id === this.id) {
+          neighboringSourceNodes.push(l.source)
+          neighboringSourceLinks.push(l)
+        } else {
+          neighboringTargetNodes.push(l.target)
+          neighboringTargetLinks.push(l)
+        }
+        return true
+      }
+      return false
+    })
+    return {
+      nodes: neighboringNodes,
+      targetNodes: neighboringTargetNodes,
+      sourceNodes: neighboringSourceNodes,
+      links: neighboringLinks,
+      targetLinks: neighboringTargetLinks,
+      sourceLinks: neighboringSourceLinks
+    }
+  }
+
+  // 获取唯一source，listNode和tempNode专用，因为entityNode的source可能有多个，rootNode无source
+  getSourceNode (gData) {
+    const links = gData.links.filter(l => l.target.id === this.id)
+    const nodes = gData.nodes.filter(n => links.some(l => l.source.id === n.id))
+    return nodes.length > 0 ? nodes[0] : null
+  }
+
+  // listNode和entityNode专用，查询关联实体列表
+  async queryRelatedEntities (targetEntityType) {
+    let _targetEntityType = targetEntityType
+    if (this.data.entityType === entityType.domain && targetEntityType === entityType.domain) {
+      _targetEntityType = 'subdomain'
+    }
+    const url = `${api.entity.entityGraph[`${this.data.entityType}Related${_.upperFirst(_targetEntityType)}`]}?resource=${this.data.entityName}&pageSize=10&pageNo=${this.data.relatedEntities[targetEntityType].pageNo + 1}`
+    const response = await axios.get(url).catch(e => {
       console.error(e)
       throw e
     })
     if (response.data && response.status === 200) {
+      this.data.relatedEntities[targetEntityType].pageNo += 1
       return response.data.data
     } else {
       console.error(response)
@@ -134,29 +128,10 @@ export default class Node {
     }
   }
 }
+
 export const nodeType = {
   rootNode: 'rootNode',
   listNode: 'listNode',
   entityNode: 'entityNode',
   tempNode: 'tempNode'
 }
-export async function queryRelatedEntity (node, targetEntityType) {
-  let _targetEntityType = targetEntityType
-  if (node.myData.entityType === 'domain' && targetEntityType === 'domain') {
-    _targetEntityType = 'subdomain'
-  }
-  let url = `${api.entity.entityGraph[`${node.myData.entityType}Related${_.upperFirst(_targetEntityType)}`]}?resource=${node.myData.entityName}&pageSize=10`
-  const current = node.myData.relatedEntity[targetEntityType].list.length
-  const pageNo = parseInt(current / 10) + 1
-  url += `&pageNo=${pageNo}`
-  const response = await axios.get(url).catch(e => {
-    console.error(e)
-    throw e
-  })
-  if (response.data && response.status === 200) {
-    return response.data.data
-  } else {
-    console.error(response)
-    throw response
-  }
-}
diff --git a/src/views/entityExplorer/entityGraph/node2.js b/src/views/entityExplorer/entityGraph/node2.js
new file mode 100644
index 00000000..a2209d88
--- /dev/null
+++ b/src/views/entityExplorer/entityGraph/node2.js
@@ -0,0 +1,162 @@
+import _ from 'lodash'
+import i18n from '@/i18n'
+import axios from 'axios'
+import { api } from '@/utils/api'
+import { entityDefaultColor } from '@/utils/constants'
+import { formatTags } from '@/utils/tools'
+
+export default class Node {
+  /*
+  * type: 对应nodeType
+  * cfg: { entityType, entityName, x, y, fx, fy }
+  * */
+  constructor (type, id, cfg, sourceNode) {
+    this.type = type
+    this.id = id
+    this.x = _.get(cfg, 'x', null)
+    this.y = _.get(cfg, 'y', null)
+    this.fx = _.get(cfg, 'fx', null)
+    this.fy = _.get(cfg, 'fy', null)
+    this.myData = {
+      entityType: cfg.entityType,
+      entityName: cfg.entityName
+    }
+    if (sourceNode) {
+      this.sourceNode = sourceNode
+    }
+    this.label = this.generateLabel()
+  }
+
+  generateLabel () {
+    switch (this.type) {
+      case nodeType.rootNode:
+      case nodeType.entityNode: {
+        return this.id
+      }
+      case nodeType.listNode: {
+        return `${this.getLabelText()}(${_.get(this.sourceNode.myData, 'relatedEntity.' + this.myData.entityType + '.total', 0)})`
+      }
+      case nodeType.tempNode: {
+        return this.getLabelText()
+      }
+    }
+    return ''
+  }
+
+  getLabelText () {
+    if (this.myData.entityType === 'ip') {
+      if (this.sourceNode.myData.entityType === 'app') {
+        return i18n.global.t('entities.tab.relatedIp')
+      } else if (this.sourceNode.myData.entityType === 'domain') {
+        return i18n.global.t('entities.graph.resolveIp')
+      }
+    } else if (this.myData.entityType === 'domain') {
+      if (this.sourceNode.myData.entityType === 'ip') {
+        return i18n.global.t('entities.graph.resolvedDomain')
+      } else if (this.sourceNode.myData.entityType === 'app') {
+        return i18n.global.t('entities.graph.relatedDomain')
+      } else if (this.sourceNode.myData.entityType === 'domain') {
+        return i18n.global.t('entities.subdomain')
+      }
+    } else if (this.myData.entityType === 'app') {
+      return i18n.global.t('entities.tab.relatedApp')
+    }
+    return ''
+  }
+
+  isSubdomain () {
+    if (this.sourceNode) {
+      return this.sourceNode.myData.entityType === 'domain' && this.myData.entityType === 'domain'
+    } else {
+      return false
+    }
+  }
+
+  // 查询basicInfo、tags、关联实体数量
+  async queryDetailData () {
+    const entityType = this.myData.entityType
+    const entityName = this.myData.entityName
+
+    this.myData.basicInfo = await this.queryEntityBasicInfo(entityType, entityName)
+
+    const tags = await this.queryTags(entityType, entityName)
+    let _tags = []
+    formatTags(tags, entityType, _tags)
+    if (_.isArray(tags.userDefinedTags)) {
+      _tags = _.concat(_tags, tags.userDefinedTags.map(tag => ({ value: tag.tagValue, color: tag.knowledgeBase ? tag.knowledgeBase.color : entityDefaultColor })))
+    }
+    this.myData.tags = _tags
+
+    const relatedEntityTotalCount = await this.queryRelatedEntityCount(entityType, entityName)
+    this.myData.relatedEntity = {
+      ip: { total: relatedEntityTotalCount.ipCount, list: [] },
+      domain: { total: this.myData.entityType === 'domain' ? relatedEntityTotalCount.subDomainCount : relatedEntityTotalCount.domainCount, list: [] },
+      app: { total: relatedEntityTotalCount.appCount, list: [] }
+    }
+  }
+
+  async queryEntityBasicInfo (entityType, entityName) {
+    const response = await axios.get(`${api.entity.entityGraph.basicInfo}/${entityType}?resource=${entityName}`).catch(e => {
+      console.error(e)
+      throw e
+    })
+    if (response.data && response.status === 200) {
+      return response.data.data
+    } else {
+      console.error(response)
+      throw response
+    }
+  }
+
+  async queryTags (entityType, entityName) {
+    const response = await axios.get(`${api.entity.entityGraph.tags}/${entityType}?resource=${entityName}`).catch(e => {
+      console.error(e)
+      throw e
+    })
+    if (response.data && response.status === 200) {
+      return response.data.data
+    } else {
+      console.error(response)
+      throw response
+    }
+  }
+
+  async queryRelatedEntityCount (entityType, entityName) {
+    const response = await axios.get(`${api.entity.entityGraph.relatedEntityCount}/${entityType}?resource=${entityName}`).catch(e => {
+      console.error(e)
+      throw e
+    })
+    if (response.data && response.status === 200) {
+      return response.data.data
+    } else {
+      console.error(response)
+      throw response
+    }
+  }
+}
+export const nodeType = {
+  rootNode: 'rootNode',
+  listNode: 'listNode',
+  entityNode: 'entityNode',
+  tempNode: 'tempNode'
+}
+export async function queryRelatedEntity (node, targetEntityType) {
+  let _targetEntityType = targetEntityType
+  if (node.myData.entityType === 'domain' && targetEntityType === 'domain') {
+    _targetEntityType = 'subdomain'
+  }
+  let url = `${api.entity.entityGraph[`${node.myData.entityType}Related${_.upperFirst(_targetEntityType)}`]}?resource=${node.myData.entityName}&pageSize=10`
+  const current = node.myData.relatedEntity[targetEntityType].list.length
+  const pageNo = parseInt(current / 10) + 1
+  url += `&pageNo=${pageNo}`
+  const response = await axios.get(url).catch(e => {
+    console.error(e)
+    throw e
+  })
+  if (response.data && response.status === 200) {
+    return response.data.data
+  } else {
+    console.error(response)
+    throw response
+  }
+}
diff --git a/src/views/entityExplorer/entityGraph/utils.js b/src/views/entityExplorer/entityGraph/utils.js
new file mode 100644
index 00000000..62a633a0
--- /dev/null
+++ b/src/views/entityExplorer/entityGraph/utils.js
@@ -0,0 +1,151 @@
+import _ from 'lodash'
+import { nodeType } from '@/views/entityExplorer/entityGraph/node'
+import i18n from '@/i18n'
+import { entityType } from '@/utils/constants'
+import axios from 'axios'
+import { api } from '@/utils/api'
+
+export function generateLabel (type, id, data, sourceNode) {
+  switch (type) {
+    case nodeType.rootNode:
+    case nodeType.entityNode: {
+      return id
+    }
+    case nodeType.listNode: {
+      return `${getLabelText(data, sourceNode)}(${_.get(sourceNode.data, 'relatedEntities.' + data.entityType + '.total', 0)})`
+    }
+    case nodeType.tempNode: {
+      return getLabelText(data, sourceNode)
+    }
+  }
+  return ''
+}
+
+export function builtTooltip (node) {
+  if (node && node.type !== nodeType.tempNode) {
+    if (node.type === nodeType.listNode) {
+      let iconClass = ''
+      let title = ''
+      let total = 0
+      let loadedCount = 0
+      switch (node.data.entityType) {
+        case 'ip': {
+          iconClass = 'cn-icon cn-icon-resolve-ip'
+          title = i18n.global.t('entities.graph.resolveIp')
+          total = _.get(node.sourceNode.data, 'relatedEntities.ip.total', 0)
+          loadedCount = _.get(node.sourceNode.data, 'relatedEntities.ip.list', []).length
+          break
+        }
+        case 'domain': {
+          iconClass = 'cn-icon cn-icon-subdomain'
+          title = node.isSubdomain ? i18n.global.t('entities.subdomain') : i18n.global.t('entity.graph.resolveDomain')
+          total = _.get(node.sourceNode.data, 'relatedEntities.domain.total', 0)
+          loadedCount = _.get(node.sourceNode.data, 'relatedEntities.domain.list', []).length
+          break
+        }
+        case 'app': {
+          iconClass = 'cn-icon cn-icon-app-name'
+          title = i18n.global.t('entities.tab.relatedApp')
+          total = _.get(node.sourceNode.data, 'relatedEntities.app.total', 0)
+          loadedCount = _.get(node.sourceNode.data, 'relatedEntities.app.list', []).length
+          break
+        }
+      }
+      return `<div class="primary-node-tooltip">
+              <div class="tooltip__header"><i class="${iconClass}"></i><span class="tooltip__title">${title}</span></div>
+              <div class="tooltip__content">
+                <span>${i18n.global.t('entity.graph.associatedCount')}:&nbsp;${total}</span>
+                <span>${i18n.global.t('entity.graph.expandedEntityCount')}:&nbsp;${loadedCount}</span>
+              </div>
+            </div>`
+    } else if (node.type === nodeType.entityNode || node.type === nodeType.rootNode) {
+      if (node.data && node.data.tags && node.data.tags.length > 0) {
+        return `<div class="entity-node-tooltip">
+                <div class="tooltip__header">
+                  <span class="tooltip__title">${node.realId}</span>
+                </div>
+                <div class="tooltip__content">
+                  <div class="content-header">
+                    <div class="header-icon"></div>
+                    <span>${i18n.global.t('entity.graph.tags')}</span>
+                  </div>
+                  <div class="content-tag-list">${this.generateTagHTML(node.data.tags)}</div>
+                </div>
+              </div>`
+      } else {
+        return `<div style="padding: 0 6px; font-size: 15px; line-height: 15px; color: #111;">${node.realId}</div>`
+      }
+    }
+  }
+}
+function generateTagHTML (tags) {
+  let html = ''
+  if (tags) {
+    tags.forEach(t => {
+      html += `<div class="entity-tag entity-tag--level-two-${t.type}">
+                  <span>${t.value}</span>
+                </div>`
+    })
+  }
+  return html
+}
+
+function getLabelText (data, sourceNode) {
+  if (data.entityType === entityType.ip) {
+    if (sourceNode.data.entityType === entityType.app) {
+      return i18n.global.t('entities.tab.relatedIp')
+    } else if (sourceNode.data.entityType === entityType.domain) {
+      return i18n.global.t('entities.graph.resolveIp')
+    }
+  } else if (data.entityType === entityType.domain) {
+    if (sourceNode.data.entityType === entityType.ip) {
+      return i18n.global.t('entities.graph.resolvedDomain')
+    } else if (sourceNode.data.entityType === entityType.app) {
+      return i18n.global.t('entities.graph.relatedDomain')
+    } else if (sourceNode.data.entityType === entityType.domain) {
+      return i18n.global.t('entities.subdomain')
+    }
+  } else if (data.entityType === entityType.app) {
+    return i18n.global.t('entities.tab.relatedApp')
+  }
+  return ''
+}
+
+export async function queryEntityBasicInfo (entityType, entityName) {
+  const response = await axios.get(`${api.entity.entityGraph.basicInfo}/${entityType}?resource=${entityName}`).catch(e => {
+    console.error(e)
+    throw e
+  })
+  if (response.data && response.status === 200) {
+    return response.data.data
+  } else {
+    console.error(response)
+    throw response
+  }
+}
+
+export async function queryTags (entityType, entityName) {
+  const response = await axios.get(`${api.entity.entityGraph.tags}/${entityType}?resource=${entityName}`).catch(e => {
+    console.error(e)
+    throw e
+  })
+  if (response.data && response.status === 200) {
+    return response.data.data
+  } else {
+    console.error(response)
+    throw response
+  }
+}
+
+export async function queryRelatedEntityCount (entityType, entityName) {
+  const response = await axios.get(`${api.entity.entityGraph.relatedEntityCount}/${entityType}?resource=${entityName}`).catch(e => {
+    console.error(e)
+    throw e
+  })
+  if (response.data && response.status === 200) {
+    return response.data.data
+  } else {
+    console.error(response)
+    throw response
+  }
+}
diff --git a/src/views/entityExplorer/testData2.js b/src/views/entityExplorer/testData2.js
new file mode 100644
index 00000000..86e47cb5
--- /dev/null
+++ b/src/views/entityExplorer/testData2.js
@@ -0,0 +1,7 @@
+export default {
+  nodes: [
+    {
+
+    }
+  ]
+}