|
|
@@ -333,23 +333,36 @@ watch(() => store.selectedEdgeId, updateSelection)
|
|
|
|
|
|
watch(() => store.highlightedNodeIds.size, updateSelection)
|
|
|
|
|
|
-// 监听 hover 状态变化(人设树联动)
|
|
|
-watch(() => store.hoverPathNodes.size, () => {
|
|
|
- if (!svgRef.value) return
|
|
|
+// 监听 hover 状态变化(人设树联动 - 展示上下游节点)
|
|
|
+watch(() => store.hoverNodeId, (hoverNodeId) => {
|
|
|
+ if (!svgRef.value || !currentRoot) return
|
|
|
const svg = d3.select(svgRef.value)
|
|
|
|
|
|
const allNodes = svg.selectAll('.tree-node')
|
|
|
const allLinks = svg.selectAll('.tree-link')
|
|
|
|
|
|
- if (store.hoverPathNodes.size > 0) {
|
|
|
- // 应用路径高亮
|
|
|
- applyHoverHighlight(allNodes, allLinks, null, store.hoverPathNodes)
|
|
|
+ if (hoverNodeId && nodeElements[hoverNodeId]) {
|
|
|
+ // 找到hover节点在树中的d3节点
|
|
|
+ const treeNode = currentRoot.descendants().find(d => d.data.id === hoverNodeId)
|
|
|
+ if (!treeNode) {
|
|
|
+ updateSelection()
|
|
|
+ return
|
|
|
+ }
|
|
|
|
|
|
- // 如果 hover 的节点在人设树中,居中显示它(跟点击效果一样)
|
|
|
- const hoverNodeId = store.hoverNodeId
|
|
|
- if (hoverNodeId && nodeElements[hoverNodeId]) {
|
|
|
- zoomToNode(hoverNodeId)
|
|
|
+ // 收集上下游节点:自身 + 父节点 + 子节点
|
|
|
+ const neighborNodes = new Set([hoverNodeId])
|
|
|
+ if (treeNode.parent) {
|
|
|
+ neighborNodes.add(treeNode.parent.data.id)
|
|
|
+ }
|
|
|
+ if (treeNode.children) {
|
|
|
+ treeNode.children.forEach(child => neighborNodes.add(child.data.id))
|
|
|
}
|
|
|
+
|
|
|
+ // 应用高亮(只高亮上下游节点和连接它们的边)
|
|
|
+ applyHoverHighlight(allNodes, allLinks, null, neighborNodes)
|
|
|
+
|
|
|
+ // 居中显示hover节点
|
|
|
+ zoomToNode(hoverNodeId)
|
|
|
} else {
|
|
|
// 恢复原有高亮
|
|
|
updateSelection()
|