duanhao/SocialNetworks_duan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

桥梁样式

Browse Source
This commit is contained in:
duanhao 2025-07-23 19:40:41 +08:00
parent c36a57ee7c
commit 3640b31411
3 changed files with 66 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/store/keyNodeStore2.js
View File

@ -1,6 +1,28 @@
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import { ref, computed } from 'vue' import { ref, computed } from 'vue'
// 引入桥梁节点的图片
import defAndyNgo from '@/assets/images/avatar/2/blue_Andy_Ngo.png'
import ligAndyNgo from '@/assets/images/avatar/2/light_Andy_Ngo.png'
import defEmmMac from '@/assets/images/avatar/2/blue_Emmanuel_Macron.png'
import ligEmmMac from '@/assets/images/avatar/2/light_Emmanuel_Macron.png'
import defIsrDefFor from '@/assets/images/avatar/2/blue_Israel_Defense_Forces.png'
import ligIsrDefFor from '@/assets/images/avatar/2/light_Israel_Defense_Forces.png'
import defJacHinUs from '@/assets/images/avatar/2/blue_Jackson_Hinkle_🇺🇸.png'
import ligJacHinUs from '@/assets/images/avatar/2/light_Jackson_Hinkle_🇺🇸.png'
import defJoeTru from '@/assets/images/avatar/2/blue_Joe_Truzman.png'
import ligJoeTru from '@/assets/images/avatar/2/light_Joe_Truzman.png'
import defOsiDef from '@/assets/images/avatar/2/blue_OSINTdefender.png'
import ligOsiDef from '@/assets/images/avatar/2/light_OSINTdefender.png'
import defPaulGol from '@/assets/images/avatar/2/blue_Paul_Golding.png'
import ligPaulGol from '@/assets/images/avatar/2/light_Paul_Golding.png'
import defPreBidArc from '@/assets/images/avatar/2/blue_President_Biden_Archived.png'
import ligPreBidArc from '@/assets/images/avatar/2/light_President_Biden_Archived.png'
import defRepMatGae from '@/assets/images/avatar/2/blue_Rep_Matt_Gaetz.png'
import ligRepMatGae from '@/assets/images/avatar/2/light_Rep_Matt_Gaetz.png'
import defSecAntBli from '@/assets/images/avatar/2/blue_Secretary_Antony_Blinken.png'
import ligSecAntBli from '@/assets/images/avatar/2/light_Secretary_Antony_Blinken.png'
export const useKeyNodeStore2 = defineStore('keyNode2', () => { export const useKeyNodeStore2 = defineStore('keyNode2', () => {
const allLeaderData = ref([ const allLeaderData = ref([
{ {
@ -238,16 +260,16 @@ export const useKeyNodeStore2 = defineStore('keyNode2', () => {
const bridgeNodes = ref([ const bridgeNodes = ref([
// 'Node'是节点编号，Number_of_across_communities是该节点链接社团数量，Community_of_affiliation是该节点所属社团编号，Community_size是该社团大小 // 'Node'是节点编号，Number_of_across_communities是该节点链接社团数量，Community_of_affiliation是该节点所属社团编号，Community_size是该社团大小
{postsId: 1, postsName: "President Biden Archive", 'Node': '1349149096909668363','Number_of_across_communities': 226,'Community_of_affiliation': 0, 'Community_size': 5965 }, {postsId: 1, defImg: defPreBidArc, activeImg: ligPreBidArc, postsName: "President Biden Archive", 'Node': '1349149096909668363','Number_of_across_communities': 226,'Community_of_affiliation': 0, 'Community_size': 5965 },
{postsId: 2, postsName: "Joe Truzman", 'Node': '3006348240','Number_of_across_communities': 121,'Community_of_affiliation': 13, 'Community_size': 827 }, {postsId: 2, defImg: defJoeTru, activeImg: ligJoeTru, postsName: "Joe Truzman", 'Node': '3006348240','Number_of_across_communities': 121,'Community_of_affiliation': 13, 'Community_size': 827 },
{postsId: 3, postsName: "OSINTdefender", 'Node': '1457867047334031360','Number_of_across_communities': 81,'Community_of_affiliation': 4, 'Community_size': 2323 }, {postsId: 3, defImg: defOsiDef, activeImg: ligOsiDef, postsName: "OSINTdefender", 'Node': '1457867047334031360','Number_of_across_communities': 81,'Community_of_affiliation': 4, 'Community_size': 2323 },
{postsId: 4, postsName: "Paul Golding", 'Node': '455264233','Number_of_across_communities': 80, 'Community_of_affiliation': 17, 'Community_size': 812 }, {postsId: 4, defImg: defPaulGol, activeImg: ligPaulGol, postsName: "Paul Golding", 'Node': '455264233','Number_of_across_communities': 80, 'Community_of_affiliation': 17, 'Community_size': 812 },
{postsId: 5, postsName: "Rep. Matt Gaetz", 'Node': '818948638890217473','Number_of_across_communities': 97,'Community_of_affiliation': 3, 'Community_size': 3075 }, {postsId: 5, defImg: defRepMatGae, activeImg: ligRepMatGae, postsName: "Rep. Matt Gaetz", 'Node': '818948638890217473','Number_of_across_communities': 97,'Community_of_affiliation': 3, 'Community_size': 3075 },
{postsId: 6, postsName: "Israel Defense Forces", 'Node': '18576537','Number_of_across_communities': 349,'Community_of_affiliation': 6, 'Community_size': 1178 }, {postsId: 6, defImg: defIsrDefFor, activeImg: ligIsrDefFor, postsName: "Israel Defense Forces", 'Node': '18576537','Number_of_across_communities': 349,'Community_of_affiliation': 6, 'Community_size': 1178 },
{postsId: 7, postsName: "Andy Ngo", 'Node': '2835451658','Number_of_across_communities': 243,'Community_of_affiliation': 7, 'Community_size': 1170 }, {postsId: 7, defImg: defAndyNgo, activeImg: ligAndyNgo, postsName: "Andy Ngo", 'Node': '2835451658','Number_of_across_communities': 243,'Community_of_affiliation': 7, 'Community_size': 1170 },
{postsId: 8, postsName: "Secretary Antony Blinken", 'Node': '1350150750966603777','Number_of_across_communities': 113,'Community_of_affiliation': 0, 'Community_size': 5965 }, {postsId: 8, defImg: defSecAntBli, activeImg: ligSecAntBli, postsName: "Secretary Antony Blinken", 'Node': '1350150750966603777','Number_of_across_communities': 113,'Community_of_affiliation': 0, 'Community_size': 5965 },
{postsId: 9, postsName: "Emmanuel Macron", 'Node': '1976143068','Number_of_across_communities': 240,'Community_of_affiliation': 5, 'Community_size': 1195 }, {postsId: 9, defImg: defEmmMac, activeImg: ligEmmMac, postsName: "Emmanuel Macron", 'Node': '1976143068','Number_of_across_communities': 240,'Community_of_affiliation': 5, 'Community_size': 1195 },
{postsId: 10, postsName: "Jackson Hinkle 🇺🇸", 'Node': '1151913018936053760','Number_of_across_communities': 98,'Community_of_affiliation': 19, 'Community_size': 784 }, {postsId: 10, defImg: defJacHinUs, activeImg: ligJacHinUs, postsName: "Jackson Hinkle 🇺🇸", 'Node': '1151913018936053760','Number_of_across_communities': 98,'Community_of_affiliation': 19, 'Community_size': 784 },
]) ])
// 当前激活的时间点 // 当前激活的时间点

1
src/views/KeyNodeRecognition2/components/PostDetailDialog.vue
View File

@ -23,7 +23,6 @@
<script setup> <script setup>
import { computed } from "vue"; import { computed } from "vue";
import { useKeyNodeStore2 } from "@/store/keyNodeStore2"; import { useKeyNodeStore2 } from "@/store/keyNodeStore2";
import { Icon } from "@iconify/vue";
const store = useKeyNodeStore2(); const store = useKeyNodeStore2();

44
src/views/KeyNodeRecognition2/components/graph/bridgeCommunityGraph.vue
View File

@ -7,6 +7,7 @@ import { onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import bridgeData from '@/assets/json/bridge_neighbors_communities.json'; import bridgeData from '@/assets/json/bridge_neighbors_communities.json';
import bridgeNodeHoverBgImg from '@/assets/images/bridge_node_hoverbgimg.png' import bridgeNodeHoverBgImg from '@/assets/images/bridge_node_hoverbgimg.png'
import { useKeyNodeStore2 } from '@/store/keyNodeStore2'; // 引入store
let chartInstance = null; let chartInstance = null;
@ -15,6 +16,7 @@ const processData = () => {
const nodes = []; const nodes = [];
const links = []; const links = [];
const addedCommunities = new Set(); const addedCommunities = new Set();
const keyNodeStore2 = useKeyNodeStore2(); // 获取store实例
// 找出usersNum的最小值和最大值，用于归一化 // 找出usersNum的最小值和最大值，用于归一化
let minUsersNum = Infinity; let minUsersNum = Infinity;
@ -34,19 +36,25 @@ const processData = () => {
// 添加桥梁节点和社团节点 // 添加桥梁节点和社团节点
bridgeData.forEach(item => { bridgeData.forEach(item => {
const bridgeId = item.bridgeId; const bridgeId = item.bridgeId;
// 查找对应的桥梁节点图片
const bridgeNodeInfo = keyNodeStore2.bridgeNodes.find(node => node.Node === bridgeId);
const bridgeNodeImg = bridgeNodeInfo ? bridgeNodeInfo.defImg : '';
// 添加桥梁节点 - 可以调整这个值来改变桥梁节点大小 // 添加桥梁节点 - 可以调整这个值来改变桥梁节点大小
nodes.push({ nodes.push({
id: `bridge_${bridgeId}`, id: `bridge_${bridgeId}`,
name: `桥梁节点 ${bridgeId.substring(0, 5)}...`, // name: `桥梁节点 ${bridgeId.substring(0, 5)}...`,
category: 0, category: 0,
value: 20 // 桥梁节点大小（可修改） value: 20, // 桥梁节点大小（可修改）
symbol: bridgeNodeImg ? `image://${bridgeNodeImg}` : 'circle', // 使用图片或默认圆形
symbolSize: 40 // 调整图片大小
}); });
// 添加社团节点和边 // 添加社团节点和边
item.bridgeCommunities.forEach(community => { item.bridgeCommunities.forEach(community => {
const communityId = community.communityId; const communityId = community.communityId;
const communityKey = `community_${communityId}`; const userNumofCommunity = community.usersNum
const communityKey = `community_${communityId}_${userNumofCommunity}`;
const usersNum = community.usersNum; const usersNum = community.usersNum;
// 归一化usersNum到节点大小范围 // 归一化usersNum到节点大小范围
@ -57,9 +65,10 @@ const processData = () => {
if (!addedCommunities.has(communityKey)) { if (!addedCommunities.has(communityKey)) {
nodes.push({ nodes.push({
id: communityKey, id: communityKey,
name: `社团 ${communityId} (${usersNum})`, // name: `社团 ${communityId} (${usersNum})`,
category: 1, category: 1,
value: size // 根据usersNum动态设置大小 value: size, // 根据usersNum动态设置大小
symbolSize: size
}); });
addedCommunities.add(communityKey); addedCommunities.add(communityKey);
} }
@ -113,7 +122,9 @@ const initChart = () => {
// 判断节点类型 // 判断节点类型
if(params.data.category === 1) { if(params.data.category === 1) {
// 社团节点 // 社团节点
const usersNum = params.data.name.match(/\((\d+)\)/)?.[1] || 0; // const usersNum = params.data.name.match(/\((\d+)\)/)?.[1] || 0;
const parts = params.data.id.split('_');
const extractedUserNum = parseInt(parts[parts.length - 1], 10);
return `<div return `<div
style = " style = "
width: 126px; width: 126px;
@ -129,7 +140,7 @@ const initChart = () => {
flex-direction: column; flex-direction: column;
"> ">
<div style="color:#fff;letter-spacing: 0.14px;"> <div style="color:#fff;letter-spacing: 0.14px;">
社团用户数：${usersNum} 社团用户数：${extractedUserNum}
</div> </div>
</div>`; </div>`;
}else { }else {
@ -199,14 +210,27 @@ const initChart = () => {
{ {
name: '桥梁节点', name: '桥梁节点',
itemStyle: { itemStyle: {
color: '#ff7300' // 节点颜色
color: '#ff7300',
} }
}, },
{ {
name: '社团节点', name: '社团节点',
itemStyle: { itemStyle: {
color: '#1890ff' // 节点颜色
} color: new echarts.graphic.RadialGradient(0.97, 0.38, 0.8, [
{ offset: 0, color: "#49c3ed" }, // 最右侧
{ offset: 0.5, color: "#5fa3e0" }, // 中间
{ offset: 1, color: "#7286d4" } // 最左侧
]),
// 边框样式
borderColor: '#2AB9FE',
borderWidth: 1,
borderType: 'dashed',
borderImageSource: 'linear-gradient(90deg, #2AB9FE 12.25%, #52FFF3 100.6%)',
borderImageSlice: 1,
},
symbolSize: 18
} }
], ],
roam: true, roam: true,