diff --git a/src/views/entityExplorer/EntityGraph.vue b/src/views/entityExplorer/EntityGraph.vue index eab765d4..8ac38ed3 100644 --- a/src/views/entityExplorer/EntityGraph.vue +++ b/src/views/entityExplorer/EntityGraph.vue @@ -51,7 +51,7 @@ import ForceGraph from 'force-graph' import { Algorithm } from '@antv/g6' import * as d3 from 'd3' import Node, { nodeType } from './entityGraph/node' -import Link, { linkType } from './entityGraph/link' +import Link, { linkType, linkDistance } from './entityGraph/link' import { builtTooltip } from '@/views/entityExplorer/entityGraph/utils' import _ from 'lodash' @@ -81,7 +81,6 @@ export default { try { const initialData = await this.generateInitialData() this.initialData = _.cloneDeep(initialData) // 初始化数据 - console.info(initialData) let hoverNode = null this.graph = ForceGraph()(document.getElementById('entityGraph')) .graphData(initialData) @@ -381,13 +380,15 @@ export default { const nodes = [] const links = [] 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, + nodeType.listNode, `${sourceNode.realId}__${node.data.entityType}-list`, { entityType: node.data.entityType, - x: node.x, - y: node.y + fx: sourceNode.x + k1 * linkDistance.entityToList, + fy: sourceNode.y + k2 * linkDistance.entityToList, }, sourceNode, this.defaultChargeStrength, @@ -395,36 +396,48 @@ export default { ) nodes.push(listNode) links.push(new Link(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 sourceNode.queryRelatedEntities(listNode.data.entityType) - sourceNode.data.relatedEntities[listNode.data.entityType].list.push(...entities.list) - entities.list.forEach(entity => { - const entityNode = new Node(nodeType.entityNode, entity.vertex, { - entityType: listNode.data.entityType, - entityName: entity.vertex, - x: e.x + Math.random() * 100 - 50, - y: e.y + Math.random() * 100 - 50 - }, listNode, this.defaultChargeStrength, this.getIconUrl(listNode.data.entityType, false, false)) - nodes.push(entityNode) - links.push(new Link(listNode, entityNode)) - }) - } catch (e) { - console.error(e) - this.$message.error(this.errorMsgHandler(e)) - } finally { - this.rightBox.loading = false - } - } else { - this.$message.warning(this.$t('tip.maxExpandDepth')) - } this.addItems(nodes, links) this.cleanTempItems() - // this.graph.layout() + 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) + entities.list.forEach(entity => { + const entityNode = new Node(nodeType.entityNode, entity.vertex, { + entityType: listNode.data.entityType, + entityName: entity.vertex, + x: listNode.x, + y: listNode.y + }, listNode, this.defaultChargeStrength, this.getIconUrl(listNode.data.entityType, false, false)) + nodes.push(entityNode) + links.push(new Link(listNode, entityNode)) + }) + this.addItems(nodes, links) + + 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')) + } + }, 200) // 手动高亮listNode /* const _listNode = this.graph.findById(listNode.id) @@ -457,9 +470,11 @@ export default { .d3Force('link', d3.forceLink().id(link => link.id) .distance(link => { if (link.source.type === nodeType.rootNode) { - return 180 + return linkDistance.root + } else if (link.source.type === nodeType.entityNode && link.target.type === nodeType.listNode) { + return linkDistance.entityToList } - return 90 + return linkDistance.normal }) .strength(link => { return link.strength diff --git a/src/views/entityExplorer/entityGraph/GraphEntityDetail.vue b/src/views/entityExplorer/entityGraph/GraphEntityDetail.vue index 95481430..6d0c2502 100644 --- a/src/views/entityExplorer/entityGraph/GraphEntityDetail.vue +++ b/src/views/entityExplorer/entityGraph/GraphEntityDetail.vue @@ -176,7 +176,6 @@ export default { node: { deep: true, handler (n) { - console.info(n) this.handleDetailData(n) } } @@ -270,8 +269,6 @@ export default { return location || '-' }, handleDetailData (node) { - console.info(node) - console.info(_.get(node, 'data.relatedEntities.ip.list', [])) const n = node const type = _.get(n, 'data.entityType', '') switch (type) { @@ -435,7 +432,6 @@ export default { ] } } - console.info(this.relationList) } } } diff --git a/src/views/entityExplorer/entityGraph/link.js b/src/views/entityExplorer/entityGraph/link.js index 672c7b1c..cc749642 100644 --- a/src/views/entityExplorer/entityGraph/link.js +++ b/src/views/entityExplorer/entityGraph/link.js @@ -21,3 +21,9 @@ 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 28d9fd1c..f56f8f86 100644 --- a/src/views/entityExplorer/entityGraph/node.js +++ b/src/views/entityExplorer/entityGraph/node.js @@ -16,10 +16,10 @@ export default class Node { this.type = type this.vx = 0 this.vy = 0 - this.x = null - this.y = null - this.fx = sourceNode ? null : 0// 设置为0,即可固定中心节点。0为中心节点,1为中心节点的子节点,2为第三级节点 - this.fy = sourceNode ? null : 0// 设置为0,即可固定中心节点。0为中心节点,1为中心节点的子节点,2为第三级节点 + 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