diff --git a/src/assets/images/linkPrediction/icon/character-Interaction-hidden-node.png b/src/assets/images/linkPrediction/icon/character-Interaction-hidden-node.png new file mode 100644 index 0000000..5bd666f Binary files /dev/null and b/src/assets/images/linkPrediction/icon/character-Interaction-hidden-node.png differ diff --git a/src/assets/images/linkPrediction/icon/character-hidden-node.png b/src/assets/images/linkPrediction/icon/character-hidden-node.png new file mode 100644 index 0000000..35aa437 Binary files /dev/null and b/src/assets/images/linkPrediction/icon/character-hidden-node.png differ diff --git a/src/assets/images/linkPrediction/icon/hidden-node.png b/src/assets/images/linkPrediction/icon/hidden-node.png new file mode 100644 index 0000000..9128491 Binary files /dev/null and b/src/assets/images/linkPrediction/icon/hidden-node.png differ diff --git a/src/assets/images/linkPrediction/icon/normal-group-node.png b/src/assets/images/linkPrediction/icon/normal-group-node.png new file mode 100644 index 0000000..a93f1b3 Binary files /dev/null and b/src/assets/images/linkPrediction/icon/normal-group-node.png differ diff --git a/src/assets/images/linkPrediction/icon/prediction-node.png b/src/assets/images/linkPrediction/icon/prediction-node.png new file mode 100644 index 0000000..364f0da Binary files /dev/null and b/src/assets/images/linkPrediction/icon/prediction-node.png differ diff --git a/src/views/KeyNodeDiscern/anchorRecommendation/components/communityNode.vue b/src/views/KeyNodeDiscern/anchorRecommendation/components/communityNode.vue index f529e8c..96383be 100644 --- a/src/views/KeyNodeDiscern/anchorRecommendation/components/communityNode.vue +++ b/src/views/KeyNodeDiscern/anchorRecommendation/components/communityNode.vue @@ -10,6 +10,8 @@ import * as echarts from "echarts" import anchor from "@/assets/json/anchor_community.json" import community from "@/assets/json/community_nodes.json" import nodeHoverImg from "@/assets/images/nodeHover.png" +import predictionNodeImg from "@/assets/images/linkPrediction/icon/prediction-node.png" +import normalGroupNodeImg from "@/assets/images/linkPrediction/icon/normal-group-node.png" import { storeToRefs } from "pinia" import { useKeyNodeRecognitionStore } from "@/store/keyNodeRecognition/index" import csvUrl from "@/assets/json/community_edges1.csv?url" @@ -86,7 +88,8 @@ const initChart = async () => { ([communityId, anchorList]) => ({ name: parseInt(communityId), // 社团id anchorCount: anchorList.length, // 该社团包含锚点的个数 - anchorList: anchorList // 该社团包含的锚点id数组 + anchorList: anchorList, // 该社团包含的锚点id数组 + symbol: `image://${new URL(predictionNodeImg, import.meta.url)}` }) ) @@ -96,7 +99,8 @@ const initChart = async () => { //筛选出不包含锚点的社团（不闪烁的蓝色节点） const uncontainedAnchorCommunity = Object.keys(community) .filter((node) => !includedCommunityId.includes(node)) - .map((node) => ({ name: parseInt(node), anchorCount: 0 })) + .map((node) => ({ name: parseInt(node), anchorCount: 0, symbol: `image://${new URL(normalGroupNodeImg, import.meta.url)}` })) + //合并成功后，统一设置id，避免重复id出现导致echarts渲染失败,并且取出每个社团中有多少个节点 const nodes = includeAnchorCommunity.concat(uncontainedAnchorCommunity).map((node, index) => ({ @@ -129,8 +133,8 @@ const initChart = async () => { const data = { nodes, links } const categories = [ - { name: "普通社团", category: 0 }, - { name: "含锚点社团", category: 1 } + { name: "普通社团", category: 0, icon: `image://${new URL(normalGroupNodeImg, import.meta.url)}` }, + { name: "含锚点社团", category: 1, icon: `image://${new URL(predictionNodeImg, import.meta.url)}` } ] // // 初始选项 const option = { @@ -139,7 +143,7 @@ const initChart = async () => { { data: categories.map((c) => ({ name: c.name, - itemStyle: { + /* itemStyle: { color: c.category === 0 ? new echarts.graphic.LinearGradient(1, 0, 0, 0, [ @@ -152,7 +156,8 @@ const initChart = async () => { { offset: 0.37, color: "#aef295" }, { offset: 1, color: "#c2f989" } ]) - } + }, */ + icon: c.icon, })), right: 15, bottom: 13, @@ -245,7 +250,7 @@ const initChart = async () => { animationDurationUpdate: 3500, // 节点移动更平滑 data: data.nodes.map((node) => ({ ...node, - symbolSize: node.total / 20 < 30 ? 30 : node.total / 20, + symbolSize: node.total / 20 < 30 ? 50 : (node.total / 20) + 20, itemStyle: { color: node.anchorCount === 0 diff --git a/src/views/KeyNodeDiscern/bridgeCommunication/components/graph/bridgeCommunityGraph.vue b/src/views/KeyNodeDiscern/bridgeCommunication/components/graph/bridgeCommunityGraph.vue index 153f5ac..ead6365 100644 --- a/src/views/KeyNodeDiscern/bridgeCommunication/components/graph/bridgeCommunityGraph.vue +++ b/src/views/KeyNodeDiscern/bridgeCommunication/components/graph/bridgeCommunityGraph.vue @@ -9,6 +9,8 @@ import bridgeData from '@/assets/json/bridge_neighbors_communities.json'; import bridgeNodeHoverBgImg from '@/assets/images/bridge_node_hoverbgimg.png' import { useKeyNodeStore2 } from '@/store/keyNodeStore2'; // 引入store import { cropToCircleAsync } from "@/utils/transform"; // 引入头像处理 +import normalGroupNodeImg from '@/assets/images/linkPrediction/icon/normal-group-node.png' + // 接收父组件传递的timestamp const props = defineProps({ @@ -34,7 +36,7 @@ const processData = async() => { const nodes = []; const links = []; const addedCommunities = new Set(); - // 新增：存储已处理的桥梁节点ID + // 存储已处理的桥梁节点ID const addedBridgeNodes = new Set(); // 获取store实例 const keyNodeStore2 = useKeyNodeStore2(); @@ -114,6 +116,7 @@ const processData = async() => { nodes.push({ id: communityKey, category: 1, + symbol: `image://${new URL(normalGroupNodeImg, import.meta.url)}`, symbolSize: size }); addedCommunities.add(communityKey); @@ -333,7 +336,7 @@ const initChart = async() => { // 添加自定义图标 icon: c.category === 0 ? `image://${new URL('@/assets/images/icon/bridge_node_legend.png', import.meta.url)}` - : `image://${new URL('@/assets/images/icon/community_node_legend.png', import.meta.url)}` + : `image://${new URL(normalGroupNodeImg, import.meta.url)}` })), right: 15, bottom: 13, diff --git a/src/views/LinkPrediction/characterInteraction/index.vue b/src/views/LinkPrediction/characterInteraction/index.vue index 974f619..3c6ea92 100644 --- a/src/views/LinkPrediction/characterInteraction/index.vue +++ b/src/views/LinkPrediction/characterInteraction/index.vue @@ -17,6 +17,7 @@ @@ -137,6 +138,8 @@ const interactionStore = useCharacterInteractionStore() const userInfoDialog = ref(false) const curSelectedUser = ref(null) +const storeId = "characterInteraction" + //选择某个用户组，更新贴文列表 && 更新关系图二级界面 const handleSelectedUserGroup = (group) => { interactionStore.curComponent = "detailNode" diff --git a/src/views/LinkPrediction/charactersHiddenInteraction/index.vue b/src/views/LinkPrediction/charactersHiddenInteraction/index.vue index 45410a1..008d01e 100644 --- a/src/views/LinkPrediction/charactersHiddenInteraction/index.vue +++ b/src/views/LinkPrediction/charactersHiddenInteraction/index.vue @@ -16,6 +16,7 @@
@@ -135,6 +136,9 @@ const characterHiddenStore = useCharacterHiddenStore() const userInfoDialog = ref(false) const curSelectedUser = ref(null) +const storeId = "characterHidden" + + const handleOpenUserInfoDialog = (params) => { userInfoDialog.value = params.userInfoDialog curSelectedUser.value = params.curSelectedUser diff --git a/src/views/LinkPrediction/components/communityNode.vue b/src/views/LinkPrediction/components/communityNode.vue index b6efcf3..3d94bf8 100644 --- a/src/views/LinkPrediction/components/communityNode.vue +++ b/src/views/LinkPrediction/components/communityNode.vue @@ -15,6 +15,10 @@ import { onMounted, defineEmits, inject, defineProps } from "vue" import * as echarts from "echarts" import nodeHoverImg from "@/assets/images/nodeHover.png" +import predictionNodeImg from "@/assets/images/linkPrediction/icon/prediction-node.png" +import charHiddenNodeImg from "@/assets/images/linkPrediction/icon/character-hidden-node.png" +import charInteractionHiddenNodeImg from "@/assets/images/linkPrediction/icon/character-Interaction-hidden-node.png" +import normalGroupNodeImg from "@/assets/images/linkPrediction/icon/normal-group-node.png" let chart = null const emit = defineEmits(["click:node", "click:edge"]) const statisticsList = inject("statisticsList") @@ -22,11 +26,39 @@ const props = defineProps({ interactionStore: { type: Object, required: true + }, + storeId: { + type: String, + default: "" } }) +console.log(props.storeId) const initChart = () => { chart = echarts.init(document.getElementById("container")) + const imageSelect = (node) => { + if (props.storeId == "characterInteraction") { + if (node.isIncludePredictNodes) { + if (node.selfIncludeImplicitRelationship) { + return `image://${new URL(predictionNodeImg, import.meta.url)}` + } else { + return `image://${new URL(charInteractionHiddenNodeImg, import.meta.url)}` + } + } else { + return `image://${new URL(normalGroupNodeImg, import.meta.url)}` + } + } else if (props.storeId == "characterHidden") { + if (node.isIncludePredictNodes) { + if (node.selfIncludeImplicitRelationship) { + return `image://${new URL(predictionNodeImg, import.meta.url)}` + } else { + return `image://${new URL(charHiddenNodeImg, import.meta.url)}` + } + } else { + return `image://${new URL(normalGroupNodeImg, import.meta.url)}` + } + } + } //处理社团节点 const nodes = Object.values(inject("communityNodeList") ?? []).map((item) => ({ id: item.id, @@ -35,7 +67,8 @@ const initChart = () => { nodesNum: item.nodesNum, neighbors: item.neighbors, category: item.isIncludePredictNodes ? 1 : 0, - + symbol: imageSelect(item), + symbolSize: 30, selfIncludeImplicitRelationship: item.neighbors.map((nei) => nei.id).includes(item.id) && //若该社团的id在该社团邻居中可以找到，说明自己这个社团中有互动隐关系 item.neighbors.find((nei) => nei.id == item.id).isHidden @@ -65,8 +98,8 @@ const initChart = () => { const data = { nodes, links } const categories = [ - { name: "普通社团", category: 0, icon: "circle" }, - { name: "含预测节点社团", category: 1, icon: "circle" }, + { name: "普通社团", category: 0, icon: `image://${new URL(normalGroupNodeImg, import.meta.url)}` }, + { name: "含预测节点社团", category: 1, icon: `image://${new URL(predictionNodeImg, import.meta.url)}` }, { name: props.interactionStore.predictionLegendContent, category: 2, @@ -184,7 +217,7 @@ const initChart = () => { animationDurationUpdate: 3500, // 节点移动更平滑 data: data.nodes.map((node) => ({ ...node, - symbolSize: node.nodesNum / 40 < 30 ? 40 : node.nodesNum / 40, + symbolSize: node.nodesNum / 10 < 30 ? 50 : 70, itemStyle: { color: node.isIncludePredictNodes === false diff --git a/src/views/LinkPrediction/components/graph.vue b/src/views/LinkPrediction/components/graph.vue index 5b085b7..5a9fec4 100644 --- a/src/views/LinkPrediction/components/graph.vue +++ b/src/views/LinkPrediction/components/graph.vue @@ -7,6 +7,7 @@ @click:node="handleClickNode" @click:edge="handleClickEdge" :interaction-store="interactionStore" + :storeId="storeId" > { chart = echarts.init(document.getElementById("container")) + const imageSelect = (node) => { + if (node.isIncludePredictNodes) { + if (node.selfIncludeImplicitRelationship) { + return `image://${new URL(predictionNodeImg, import.meta.url)}` + } else { + return `image://${new URL(hiddenNodeImg, import.meta.url)}` + } + } else { + return `image://${new URL(normalGroupNodeImg, import.meta.url)}` + } + } + //处理社团节点 const nodes = Object.values(communityNodeList).map((item) => ({ id: (item.id), name: (item.id), + symbol: imageSelect(item), + symbolSize: 30, isIncludePredictNodes: item.isIncludePredictNodes, nodesNum: item.nodesNum, neighbors: item.neighbors.map((nei) => ({ ...nei, name: parseInt(nei.id) })), @@ -65,8 +83,8 @@ const initChart = async () => { const data = { nodes, links } const categories = [ - { name: "普通社团", category: 0, icon: `image://${new URL('@/assets/images/linkPrediction/icon/node-legend-icon.png', import.meta.url)}`}, - { name: "含预测节点社团", category: 1, icon: `image://${new URL('@/assets/images/linkPrediction/icon/community-legend-icon.png', import.meta.url)}`}, + { name: "普通社团", category: 0, icon: `image://${new URL(normalGroupNodeImg, import.meta.url)}`}, + { name: "含预测节点社团", category: 1, icon: `image://${new URL(predictionNodeImg, import.meta.url)}`}, { name: "紧密团体关系", category: 2, icon: `image://${new URL('@/assets/images/linkPrediction/icon/tight-community-legend-icon.png', import.meta.url)}`} ] const option = { @@ -75,26 +93,6 @@ const initChart = async () => { { data: categories.map((c) => ({ name: c.name, - itemStyle: { - color: - c.category === 0 - ? new echarts.graphic.LinearGradient(1, 0, 0, 0, [ - { offset: 1, color: "#1a3860" }, // 深蓝渐变 - { offset: 0.5, color: "#38546b" }, - { offset: 0, color: "#5fb3b3" } - ]) - : c.category === 1 - ? new echarts.graphic.LinearGradient(1, 0, 0, 0, [ - { offset: 0, color: "#9eec9c" }, // 绿色渐变 - { offset: 0.37, color: "#aef295" }, - { offset: 1, color: "#c2f989" } - ]) - : new echarts.graphic.LinearGradient(1, 0, 0, 0, [ - { offset: 0, color: "#ff9a9e" }, // 红色渐变（用于 category === 2） - { offset: 0.5, color: "#fad0c4" }, - { offset: 1, color: "#fbc2eb" } - ]) - }, icon: c.icon })), right: 15, @@ -185,7 +183,7 @@ const initChart = async () => { animationDurationUpdate: 3500, // 节点移动更平滑 data: data.nodes.map((node) => ({ ...node, - symbolSize: node.nodesNum / 40 < 30 ? 40 : node.nodesNum / 40, + symbolSize: node.nodesNum / 10 < 30 ? 50 : 70, itemStyle: { color: node.isIncludePredictNodes === false