Browse Source

知识图谱布局调整

Kevin Jiang 2 years ago
parent
commit
a02782efec

+ 18 - 20
src/models/knowledgeGraph.model.ts

@@ -3,7 +3,7 @@ import type { GraphData } from "@antv/g6";
 
 export class GraphDataManager {
   private graphData: GraphData = {nodes: [], edges: []};
-  private nodeNames: Set<string> = new Set();
+  private nodeIds: Set<string> = new Set();
   private edgeNames: Set<string> = new Set();
 
   constructor() {}
@@ -15,40 +15,38 @@ export class GraphDataManager {
   }
 
   public addSubjectNode(node: SubjectNode) {
-    console.log('add subject node', node)
+    if (!this.nodeIds.has(node.fieldID)) {
+      this.graphData.nodes?.push({
+        id: node.fieldID,
+        nodeId: node.id,
+        label: node.name,
+      })
+      this.nodeIds.add(node.fieldID);
+    }
     if (node.children && node.children.length > 0) {
       this.addEdge(node);
+      this.addSubjectNodes(node.children)
     }
-    if (this.nodeNames.has(node.name)) {
-      console.log('node', node.name, 'exists')
-      return;
-    }
-
-    this.graphData.nodes?.push({
-      id: node.fieldID,
-      label: node.name,
-    })
-    this.nodeNames.add(node.name);
   }
 
   private addEdge(node: SubjectNode, deepth: number = 0) {
-    console.log('add edge')
     if (!node.children || node.children.length <= 0 || deepth > 2) {
       return;
     }
     for (const child of node.children) {
-      const key = `${node.name}_${child.name}`;
-      console.log('key', key)
+      const key = `${node.fieldID}_${child.fieldID}`;
       if (this.edgeNames.has(key)) {
         continue;
       }
-      console.log('add edge: ', {
-        source: node.fieldID,
-        target: child.fieldID,
-      })
       this.graphData.edges?.push({
         source: node.fieldID,
         target: child.fieldID,
+        labelCfg: {
+          style: {
+            fontSize: 10,
+            opacity: 0.5,
+          }
+        }
       })
       this.edgeNames.add(key);
     }
@@ -56,7 +54,7 @@ export class GraphDataManager {
 
   public pruge() {
     this.graphData = {nodes: [], edges: []};
-    this.nodeNames = new Set();
+    this.nodeIds = new Set();
     this.edgeNames = new Set();
   }
 

+ 1 - 0
src/types/knowledgeGraph.types.ts

@@ -26,6 +26,7 @@ export interface Property {
 
 export interface Request {
   name: string;
+  id?: number;
   size: number;
   findParents: boolean;
   findChildren: boolean;

+ 25 - 15
src/views/knowledgeGraph/KnowledgeGraphView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, type Ref } from "vue";
-import G6, { type Graph, type Item } from '@antv/g6';
+import G6, { type Graph, type Item, type NodeConfig } from '@antv/g6';
 import type { SearchResult } from "@/types/search.types";
 import type { Request } from "@/types/knowledgeGraph.types";
 import SearchResultList from "../search/components/SearchResultList.vue";
@@ -36,7 +36,10 @@ function find(request: Request) {
   knowledgeGraphService.find(request).then((nodes) => {
     graphDataManager.addSubjectNodes(nodes);
     if (graph && nodes.length > 0) {
-      graph.read(graphDataManager.getGraphData() as any)
+      graph.changeData(graphDataManager.getGraphData())
+      graph.render()
+      graph.layout()
+      // graph.read(graphDataManager.getGraphData() as any)
     }
     msgHandler()
   }).catch(() => {
@@ -44,12 +47,12 @@ function find(request: Request) {
   })
 }
 
-function findParents(name: string) {
-  find({name, size: 10, findParents: true, findChildren: false})
+function findParents(id: number) {
+  find({name: '', id, size: 10, findParents: true, findChildren: false})
 }
 
-function findChildren(name: string) {
-  find({name, size: 10, findParents: false, findChildren: true})
+function findChildren(id: number) {
+  find({name: '', id, size: 10, findParents: false, findChildren: true})
 }
 
 function findName(name: string) {
@@ -101,12 +104,12 @@ const menu = new G6.Menu({
   },
   handleMenuClick(target: HTMLElement, item: Item) {
     const menuName = target.getAttribute("name")
-    const model = item.getModel()
+    const model = item.getModel() as NodeConfig
     if (model.label) {
       if (menuName == 'parent') {
-        findParents(model.label as string)
+        if (model.nodeId) findParents(model.nodeId as number)
       } else if (menuName == 'child') {
-        findChildren(model.label as string)
+        if (model.nodeId) findChildren(model.nodeId as number)
       } else if (menuName == 'search') {
         searchNodeName.value = model.label as string
         searchSubject(searchNodeName.value)
@@ -115,13 +118,17 @@ const menu = new G6.Menu({
   },
 });
 
-function initGraph() {
+function initGraph(width: number, height: number) {
   const graph = new G6.Graph({
     container: 'graph',
+    width: width,
+    height: height,
     layout: {
-      type: 'forceAtlas2',
+      type: 'force',
       preventOverlap: true,
-      kr: 20,
+      linkDistance: 150,
+      nodeStrength: 150,
+      nodeSize: 80,
     },
     modes: {
       // 允许拖拽画布、放缩画布、拖拽节点
@@ -179,8 +186,11 @@ function onSearch() {
 }
 
 onMounted(() => {
-  graph = initGraph()
-  findName("")
+  const rect = document.getElementById("graph")?.getBoundingClientRect()
+  if (rect) {
+    graph = initGraph(rect.width, rect.height)
+    findName("")
+  }
 });
 </script>
 
@@ -244,7 +254,7 @@ onMounted(() => {
   }
 
   .graph-wrap {
-    height: 460px;
+    height: 500px;
 
     .graph {
       width: 100%;