更新依赖

.eslintrc.js

@@ -4,9 +4,8 @@ module.exports = {
     es2021: true,
   },
   extends: ['plugin:vue/vue3-recommended', 'plugin:prettier/recommended'],
-  parserOptions: {
-    parser: 'babel-eslint',
-  },
+  parser: 'vue-eslint-parser',
+  plugins: ['vue'],
   rules: {
     'vue/no-multiple-template-root': 'off',
     'vue/max-attributes-per-line': 'off',

.prettierrc.js

@@ -3,4 +3,4 @@ module.exports = {
   useTabs: false,
   singleQuote: true,
   semi: false,
-}
\ No newline at end of file
+};

README.md

 ## relation-graph
 
-关系图工具 with D3.js
+关系图 with D3.js
+
+---
+
+- 安装依赖
+
+```bash
+npm install
+```
+
+- 启动
+
+```bash
+npm run dev
+# or
+npm start
+```
+
+- 打包
+
+```bash
+npm run build
+```

package.json

 {
   "name": "relation-graph",
-  "version": "0.0.0",
+  "version": "0.0.1",
+  "description": "关系图",
+  "author": "Mr.Guo",
   "scripts": {
     "dev": "vite",
-    "start": "node node_modules/esbuild/install.js && npm run dev",
+    "start": "npm run dev",
     "build": "vite build"
   },
   "dependencies": {
     "axios": "^0.21.1",
     "d3": "^7.0.0",
     "qs": "^6.10.1",
-    "vue": "^3.0.5"
+    "vue": "^3.1.5"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^1.1.5",
-    "@vue/compiler-sfc": "^3.0.5",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^7.17.0",
-    "eslint-config-prettier": "^7.1.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^7.4.1",
+    "@vitejs/plugin-vue": "^1.3.0",
+    "@vue/compiler-sfc": "^3.1.5",
+    "eslint": "^7.30.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-vue": "^7.14.0",
     "naive-ui": "^2.16.5",
-    "prettier": "^2.2.1",
+    "prettier": "^2.3.2",
     "stylus": "^0.54.8",
-    "vite": "^2.1.0"
-  },
-  "description": "关系图工具",
-  "author": "Guo"
+    "vite": "^2.4.4",
+    "vue-eslint-parser": "^7.10.0"
+  }
 }

src/ajax/api.js

@@ -11,7 +11,7 @@ export default {
   PUT_SUBJECT: '/subject/{id}',
   GET_RELATIONS: '/relations',
   POST_SUBJECT: '/subject',
-  POST_NODE: '/node/relation',
+  POST_NODE: '/node/relation/v2',
   DELETE_RELATION: '/node/relation/{id}',
   GET_NODES: '/node/relations',
   DELETE_NODE: '/node/{id}',

src/components/main.vue

 <template>
   <div class="main">
-    <Nav style="grid-area: nav" />
     <D3
       ref="d3Ref"
       style="grid-area: content"
@@ -13,7 +12,6 @@
       @link="openLinkDrawer"
       @del-link="deleteLink"
     />
-    <Side style="grid-area: side" />
     <Footer
       style="grid-area: footer"
       :node="curNode"
@@ -176,8 +174,6 @@
 
 <script setup>
 import D3 from './d3.vue'
-import Nav from './nav.vue'
-import Side from './side.vue'
 import Footer from './footer.vue'
 import { ref, watch } from 'vue'
 import { ajax, api } from '@/ajax'
@@ -574,9 +570,9 @@ function deleteItem(i) {
   height 100vh
   display grid
   overflow hidden
-  grid-template-areas 'nav nav' 'side content' 'side footer'
-  grid-template-columns 0px 1fr
-  grid-template-rows 0px 1fr 70px
+  grid-template-areas 'content' 'footer'
+  grid-template-columns 1fr
+  grid-template-rows 1fr 70px
   padding 4px
   font-weight bold !important
 

src/components/nav.vue

-<template>
-  <div class="nav">
-    <!-- <n-input
-      v-model:value="searchKey"
-      type="text"
-      placeholder="搜索Subject"
-      clearable
-      @keypressenter="search"
-    /> -->
-  </div>
-</template>
-
-<script>
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  name: 'Nav',
-  emits: ['search'],
-  setup(_, ctx) {
-    const searchKey = ref(null)
-    return {
-      searchKey,
-      search: () => ctx.emit('search', searchKey.value),
-    }
-  },
-})
-</script>
-
-<style lang="stylus" scoped>
-// .nav
-//   background #f9fbfd
-//   border-bottom 4px solid #fff
-//   padding 0 10px
-</style>

src/components/side.vue

-<template>
-  <div></div>
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'Side',
-  setup() {},
-})
-</script>
-
-<style lang="stylus" scoped></style>

src/util/useD3.js

@@ -76,6 +76,23 @@ function textWrap(text, width) {
   })
 }
 
+/*
+ *求圆内接正多边形的顶点串，形如x1,y1,x2,y2,...xn,yn
+ *cx,cy为圆心，r为半径，n为边数，正多边形底边与X轴平行
+ */
+function polygonPoints(cx, cy, r, n) {
+  const alpha = (2 * Math.PI) / n
+  let a = Math.PI / 2 + alpha / 2
+  let points = ''
+  for (let i = 0; i < n; i++) {
+    x = cx + r * Math.cos(a)
+    y = cy + r * Math.sin(a)
+    points += x + ',' + y + ','
+    a += alpha
+  }
+  return points.substring(0, points.length - 1)
+}
+
 // 默认配置
 const defaultConfig = {
   nodes: [], // 节点数组
@@ -167,7 +184,21 @@ export default class RelationGraph {
         }
       })
     })
-    return { links, nodes }
+    const subjects = []
+    const objects = []
+    const others = []
+    nodes.forEach((n) => {
+      if (n.subjectType) {
+        if (n.subjectType == '1') {
+          subjects.push(n)
+        } else if (n.subjectType == '2') {
+          objects.push(n)
+        }
+      } else {
+        others.push(n)
+      }
+    })
+    return { links, nodes, subjects, objects, others }
   }
 
   setKey(key) {