소스 검색

fix[knowlege]: highlight error

chenlei 3 주 전
부모
커밋
f77f92dd96
1개의 변경된 파일43개의 추가작업 그리고 8개의 파일을 삭제
  1. 43 8
      src/pages/A9knowlege/index.tsx

+ 43 - 8
src/pages/A9knowlege/index.tsx

@@ -91,9 +91,18 @@ function A9knowlege() {
             max: 3
           },
           label: { position: 'right' },
-          emphasis: { focus: 'adjacency' },
+          focusNodeAdjacency: true,
+          emphasis: {
+            focus: 'adjacency',
+            lineStyle: {
+              width: 3,
+              opacity: 1
+            }
+          },
           force: { repulsion: 200, edgeLength: [50, 120] },
-          lineStyle: { color: 'source', curveness: 0.2 }
+          lineStyle: { color: 'source', curveness: 0.2 },
+          edgeLabel: { show: false },
+          edgeSymbol: ['none', 'none']
         }
       ]
     }
@@ -107,15 +116,41 @@ function A9knowlege() {
     myChart.on('click', function (params: any) {
       if (!params || !params.data) return
 
-      // 高亮相关节点连线
+      // 取消所有高亮
       myChart.dispatchAction({
-        type: 'highlight',
-        dataIndex: params.dataIndex
+        type: 'downplay'
       })
 
-      const node = params.data
-      if (node && node.raw && node.raw.type) {
-        setDetail(node.raw)
+      if (params.dataType === 'edge') {
+        const edge = params.data
+        const sourceIndex = graph.nodes.findIndex((n: any) => n.id === edge.source)
+        const targetIndex = graph.nodes.findIndex((n: any) => n.id === edge.target)
+
+        if (sourceIndex !== -1 && targetIndex !== -1) {
+          // 高亮源节点
+          myChart.dispatchAction({
+            type: 'highlight',
+            dataIndex: sourceIndex
+          })
+          // 高亮目标节点
+          setTimeout(() => {
+            myChart.dispatchAction({
+              type: 'highlight',
+              dataIndex: targetIndex
+            })
+          }, 10)
+        }
+      } else {
+        // 点击的是节点
+        myChart.dispatchAction({
+          type: 'highlight',
+          dataIndex: params.dataIndex
+        })
+
+        const node = params.data
+        if (node && node.raw && node.raw.type) {
+          setDetail(node.raw)
+        }
       }
     })
     const resizeHandler = () => myChart.resize()