完成第三模块页面2,3连边高亮,节点高亮效果
This commit is contained in:
parent
04869323d2
commit
bd2481cad8
|
|
@ -691,8 +691,6 @@ export const useGroupMemberStore = defineStore("groupMember", {
|
||||||
return colorMap[parseInt(groupId)]
|
return colorMap[parseInt(groupId)]
|
||||||
}
|
}
|
||||||
const res = await getGroupMemberEvolutionAnalysisGraph(utcTime)
|
const res = await getGroupMemberEvolutionAnalysisGraph(utcTime)
|
||||||
console.log(res)
|
|
||||||
|
|
||||||
if (res.code != 200) return
|
if (res.code != 200) return
|
||||||
const newSet = new Set()
|
const newSet = new Set()
|
||||||
this.graph["links"] = res.data.links.map((link) => ({
|
this.graph["links"] = res.data.links.map((link) => ({
|
||||||
|
|
|
||||||
|
|
@ -50,7 +50,7 @@ const defaultConfig = {
|
||||||
borderColor: "200,50,50",
|
borderColor: "200,50,50",
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
selected: {
|
selected: {
|
||||||
borderWidth: 2,
|
borderWidth: 5,
|
||||||
borderColor: "100,250,100",
|
borderColor: "100,250,100",
|
||||||
showShadow: true, // 是否展示阴影
|
showShadow: true, // 是否展示阴影
|
||||||
shadowBlur: 5, //阴影范围大小
|
shadowBlur: 5, //阴影范围大小
|
||||||
|
|
@ -66,8 +66,8 @@ const defaultConfig = {
|
||||||
background: "255,255,255" //文字背景色(设置后文字居中,一般与画布背景色一致)
|
background: "255,255,255" //文字背景色(设置后文字居中,一般与画布背景色一致)
|
||||||
},
|
},
|
||||||
lineType: "straight", // curver
|
lineType: "straight", // curver
|
||||||
showArrow: true,
|
showArrow: false,
|
||||||
lineWidth: 2,
|
lineWidth: 1,
|
||||||
colorType: "both",
|
colorType: "both",
|
||||||
color: "240,240,240",
|
color: "240,240,240",
|
||||||
selected: {
|
selected: {
|
||||||
|
|
@ -87,6 +87,8 @@ const handlePointerDown = (time) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const registEvents = () => {
|
const registEvents = () => {
|
||||||
|
const simulation = graphVis.getSimulationLayout()
|
||||||
|
forceSimulator = simulation.forceSimulation()
|
||||||
//全局记录包裹层元素
|
//全局记录包裹层元素
|
||||||
const containerDom = document.getElementById("container")
|
const containerDom = document.getElementById("container")
|
||||||
graphVis.registEventListener("node", "mouseOver", function (event, node) {
|
graphVis.registEventListener("node", "mouseOver", function (event, node) {
|
||||||
|
|
@ -122,25 +124,54 @@ const registEvents = () => {
|
||||||
if (currentSelectNode.value != null) {
|
if (currentSelectNode.value != null) {
|
||||||
forceSimulator.alphaTarget(0)
|
forceSimulator.alphaTarget(0)
|
||||||
//如果拖动结束需要固定拖拽的节点,则注释下面两行,保留最后拖动的位置即可
|
//如果拖动结束需要固定拖拽的节点,则注释下面两行,保留最后拖动的位置即可
|
||||||
//that.currentSelectNode.fx = null;
|
currentSelectNode.value.fx = null
|
||||||
//that.currentSelectNode.fy = null;
|
currentSelectNode.value.fy = null
|
||||||
currentSelectNode.value = null
|
currentSelectNode.value = null
|
||||||
|
// highLightAboutNodesOrLinks(typeMap[storeId])
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//公用实现连线高亮函数
|
||||||
|
const highLightAboutNodesOrLinks = (type) => {
|
||||||
|
graphVis.cancelAllSelected()
|
||||||
|
if (type == "nodes") {
|
||||||
|
//实现高亮节点逻辑
|
||||||
|
const { newNodes } = graph.value
|
||||||
|
graphVis.nodes.forEach((node) =>
|
||||||
|
newNodes.forEach((newNode) => {
|
||||||
|
if (node.id === newNode.name) {
|
||||||
|
node.selected = true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
} else if (type == "links") {
|
||||||
|
//实现连线高亮逻辑
|
||||||
|
const { newLinks } = graph.value
|
||||||
|
graphVis.links.forEach((link) =>
|
||||||
|
newLinks.forEach((newLink) => {
|
||||||
|
if (link.source.id === newLink.source && link.target.id === newLink.target) {
|
||||||
|
link.selected = true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
const runDiffForceLayout = (layoutConfig, layoutType, isAsync) => {
|
const runDiffForceLayout = (layoutConfig, layoutType, isAsync) => {
|
||||||
function handleLayoutSuccess() {
|
function handleLayoutSuccess() {
|
||||||
//处理四个关系图的差异函数
|
//处理四个关系图的差异函数
|
||||||
const handleGroupDiscoveryDiff = () => {
|
const handleGroupDiscoveryDiff = () => {
|
||||||
console.log(storeId)
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleGroupStructureDiff = () => {
|
const handleGroupStructureDiff = () => {
|
||||||
console.log(storeId)
|
highLightAboutNodesOrLinks("links")
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleGroupMemberDiff = () => {
|
const handleGroupMemberDiff = () => {
|
||||||
console.log(storeId)
|
highLightAboutNodesOrLinks("nodes")
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleAnomalousGroup = () => {
|
const handleAnomalousGroup = () => {
|
||||||
|
|
@ -204,7 +235,7 @@ const runDiffForceLayout = (layoutConfig, layoutType, isAsync) => {
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
graphVis.autoGroupLayout(graphVis.nodes)
|
// graphVis.autoGroupLayout(graphVis.nodes)
|
||||||
}
|
}
|
||||||
|
|
||||||
new Map([
|
new Map([
|
||||||
|
|
@ -215,7 +246,6 @@ const runDiffForceLayout = (layoutConfig, layoutType, isAsync) => {
|
||||||
]).get(storeId)?.()
|
]).get(storeId)?.()
|
||||||
|
|
||||||
graphVis.zoomFit() //场景视图大小自适应缩放
|
graphVis.zoomFit() //场景视图大小自适应缩放
|
||||||
// graphVis.hideIsolatedNodes() //隐藏孤立节点
|
|
||||||
}
|
}
|
||||||
graphVis.excuteWorkerLayout(graphVis.getGraphData(), layoutType, layoutConfig, isAsync, () =>
|
graphVis.excuteWorkerLayout(graphVis.getGraphData(), layoutType, layoutConfig, isAsync, () =>
|
||||||
handleLayoutSuccess()
|
handleLayoutSuccess()
|
||||||
|
|
@ -245,12 +275,12 @@ const clusterAnalyze = () => {
|
||||||
node.color = color
|
node.color = color
|
||||||
})
|
})
|
||||||
graphVis.addNodesInGroup(nodes, {
|
graphVis.addNodesInGroup(nodes, {
|
||||||
shape: "circle", //circle|rect|polygon|bubbleset
|
shape: "polygon", //circle|rect|polygon|bubbleset
|
||||||
color: color,
|
color: color,
|
||||||
alpha: 0.2
|
alpha: 0.2
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
graphVis.autoGroupLayout(graphVis.nodes)
|
// graphVis.autoGroupLayout(graphVis.nodes)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 仅对“异常群体模块”生效:时间变化时强制重绘一次
|
// 仅对“异常群体模块”生效:时间变化时强制重绘一次
|
||||||
|
|
@ -302,7 +332,6 @@ const updateChart = (newGraphData) => {
|
||||||
runDiffForceLayout({ strength: -500, ajustCluster: true }, "simulation", true)
|
runDiffForceLayout({ strength: -500, ajustCluster: true }, "simulation", true)
|
||||||
}
|
}
|
||||||
|
|
||||||
let lastLength = 0 //记录上一次的长度
|
|
||||||
watch(
|
watch(
|
||||||
graph,
|
graph,
|
||||||
(newValue) => {
|
(newValue) => {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user