https://wiki.swarma.org/index.php?action=history&feed=atom&title=Graph.v20251021.html
Graph.v20251021.html - 版本历史
2026-11-02T16:19:05Z
本wiki的该页面的版本历史
MediaWiki 1.35.0
https://wiki.swarma.org/index.php?title=Graph.v20251021.html&diff=47534&oldid=prev
Jake：清空全部内容
2025-11-10T02:18:54Z
<p>清空全部内容</p>
<a href="https://wiki.swarma.org/index.php?title=Graph.v20251021.html&diff=47534&oldid=47143">显示更改</a>
Jake
https://wiki.swarma.org/index.php?title=Graph.v20251021.html&diff=47143&oldid=prev
Fynn7：建立内容为“<!DOCTYPE html> <!-- saved from url=(0044)https://wiki.swarma.org/graph.v20250715.html --> <html><head><meta http-equiv="Content-Type" content="text/html; charset…”的新页面
2025-10-21T12:12:24Z
<p>建立内容为“<!DOCTYPE html> <!-- saved from url=(0044)https://wiki.swarma.org/graph.v20250715.html --> <html><head><meta http-equiv="Content-Type" content="text/html; charset…”的新页面</p>
<p><b>新页面</b></p><div><!DOCTYPE html><br />
<!-- saved from url=(0044)https://wiki.swarma.org/graph.v20250715.html --><br />
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><br />
<br />
<meta name="viewport" content="width=device-width, initial-scale=1.0"><br />
<title>集智百科概览</title><br />
<link rel="icon" href="./集智百科概览_files/logo.jpg"><br />
<style><br />
html,<br />
body {<br />
margin: 0;<br />
padding: 0;<br />
width: 100%;<br />
height: 100%;<br />
}<br />
<br />
body {<br />
display: flex;<br />
justify-content: center;<br />
align-items: center;<br />
}<br />
<br />
.m-graph {<br />
position: relative;<br />
width: 100%;<br />
height: 100%;<br />
box-sizing: border-box;<br />
}<br />
<br />
.m-loading {<br />
position: fixed;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: #fff;<br />
z-index: 999;<br />
transition: opacity 1s ease-in-out;<br />
}<br />
.m-loading .m-animation {<br />
position: absolute;<br />
top: 50%;<br />
left: 50%;<br />
transform: translate(-50%, -50%);<br />
text-align: center;<br />
opacity: 0;<br />
transition: opacity 1s ease-in-out;<br />
}<br />
.m-loading .m-logo {<br />
display: flex;<br />
align-items: center;<br />
}<br />
.m-loading .m-logo .u-image {<br />
margin-right: 16px;<br />
width: 80px;<br />
height: 80px;<br />
}<br />
.m-loading .m-logo .u-text {<br />
font-size: 28px;<br />
}<br />
.m-loading .u-slogan {<br />
margin-top: 24px;<br />
font-size: 20px;<br />
}<br />
</style><br />
</head><br />
<br />
<body><br />
<div id="loadingEl" class="m-loading" style="opacity: 0; display: none;"><br />
<div id="animationEl" class="m-animation" style="opacity: 1;"><br />
<div class="m-logo"><br />
<img class="u-image" src="./集智百科概览_files/logo.jpg" alt="logo"><br />
<div class="u-text">欢迎来到 <b>集智百科</b></div><br />
</div><br />
<div class="u-slogan"><i>知识从我而来，问题到我为止</i></div><br />
</div><br />
</div><br />
<div id="container" class="m-graph" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;" _echarts_instance_="ec_1761038362008"><div style="position: relative; width: 2388px; height: 1188px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="3820" height="1900" style="position: absolute; left: 0px; top: 0px; width: 2388px; height: 1188px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div class=""></div></div><br />
<script defer="" src="./集智百科概览_files/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon="{&quot;version&quot;:&quot;2024.11.0&quot;,&quot;token&quot;:&quot;39cdf464f765499c8a52a31cda5e385e&quot;,&quot;r&quot;:1,&quot;server_timing&quot;:{&quot;name&quot;:{&quot;cfCacheStatus&quot;:true,&quot;cfEdge&quot;:true,&quot;cfExtPri&quot;:true,&quot;cfL4&quot;:true,&quot;cfOrigin&quot;:true,&quot;cfSpeedBrain&quot;:true},&quot;location_startswith&quot;:null}}" crossorigin="anonymous"></script><br />
<br />
<br />
<script type="text/javascript" src="./集智百科概览_files/echarts.min.js.下载"></script><br />
<script src="./集智百科概览_files/nodes.js.下载"></script><br />
<script src="./集智百科概览_files/edges.js.下载"></script><br />
<br />
<script type="text/javascript"><br />
var nodes = window.nodes;<br />
var edges = window.edges;<br />
<br />
console.log(nodes);<br />
console.log(edges);<br />
<br />
const loadingEl = document.getElementById('loadingEl')<br />
const animationEl = document.getElementById('animationEl')<br />
animationEl.style.opacity = 1<br />
setTimeout(() => {<br />
loadingEl.style.opacity = 0<br />
setTimeout(() => {<br />
loadingEl.style.display = 'none'<br />
}, 1000)<br />
}, 3000)<br />
<br />
var dom = document.getElementById("container");<br />
var myChart = echarts.init(dom);<br />
<br />
// 获取节点、连边数据<br />
// Promise.all([<br />
// 'https://api.swarma.org/api/science_nodes/list',<br />
// 'https://api.swarma.org/api/science_edges/list'<br />
// ].map(url => fetch(url, {<br />
// headers: {<br />
// 'X-Requested-With': 'XMLHttpRequest',<br />
// 'Content-Type': 'application/json'<br />
// }<br />
// })<br />
<br />
Promise.resolve([nodes, edges]).then(res => {<br />
const linkCount = new Map()<br />
const links = res[1].map(item => {<br />
linkCount.set(item.source_id, (linkCount.get(item.source_id) || 0) + 1)<br />
linkCount.set(item.target_id, (linkCount.get(item.target_id) || 0) + 1)<br />
<br />
return {<br />
source: 'node_' + item.source_id,<br />
target: 'node_' + item.target_id<br />
}<br />
})<br />
<br />
const now = Date.now()<br />
const RECENT_DAYS = 7<br />
const recentUpdatedThreshold = RECENT_DAYS * 24 * 60 * 60 * 1000<br />
<br />
const nodes = res[0].map(item => {<br />
const count = linkCount.get(item.id) || 1<br />
const isRecentlyUpdated = item.updated_at && (now - new Date(item.updated_at)) < recentUpdatedThreshold<br />
<br />
const node = {<br />
id: 'node_' + item.id,<br />
name: item.name,<br />
value: item.id,<br />
symbolSize: count >= 15 ? count / 1.5 : 5,<br />
category: 'type-' + item.type,<br />
tooltip: { formatter: '{b}' },<br />
emphasis: { label: { show: true } },<br />
url: item.url,<br />
updated_at: item.updated_at,<br />
}<br />
<br />
if (count < 10 && !isRecentlyUpdated) {<br />
node.label = { show: false }<br />
}<br />
<br />
if (isRecentlyUpdated) {<br />
node.itemStyle = {<br />
// color: '#ff6666',<br />
borderColor: '#FFCC00',<br />
borderWidth: 3<br />
}<br />
node.label = {<br />
show: true,<br />
fontWeight: 'bold',<br />
fontSize: 14<br />
}<br />
}<br />
<br />
return node<br />
})<br />
<br />
const categories = Array.from(new Set(res[0].map(node => node.type)))<br />
.map(type => ({ name: 'type-' + type }))<br />
<br />
const data = { nodes, links, categories }<br />
<br />
const option = {<br />
title: {<br />
text: '集智百科概览',<br />
subtext: '点击节点前往wiki页面',<br />
},<br />
tooltip: { show: true },<br />
series: [<br />
{<br />
type: 'graph',<br />
layout: 'force',<br />
draggable: true,<br />
data: data.nodes,<br />
links: data.links,<br />
categories: data.categories,<br />
roam: true,<br />
label: {<br />
show: true,<br />
position: 'bottom'<br />
},<br />
force: {<br />
initLayout: 'circular',<br />
repulsion: 200,<br />
edgeLength: 100,<br />
gravity: 0.05<br />
},<br />
lineStyle: { opacity: 0.3 },<br />
emphasis: { focus: 'adjacency' }<br />
}<br />
]<br />
}<br />
<br />
myChart.setOption(option)<br />
<br />
myChart.dispatchAction({<br />
type: 'graphRoam',<br />
zoom: 0.15 // 缩小为50%，可以根据需要调整，如0.3、0.7等<br />
})<br />
<br />
// 添加点击跳转功能<br />
myChart.on('click', function (event) {<br />
if (event.dataType === 'node' && event.data.url) {<br />
window.open(event.data.url, undefined, 'noopener')<br />
}<br />
})<br />
<br />
// 添加 effectScatter 闪烁层（在图渲染后添加）<br />
myChart.on('finished', function () {<br />
const graphSeries = myChart.getOption().series.find(s => s.type === 'graph')<br />
const recentEffectPoints = []<br />
<br />
for (let i = 0; i < graphSeries.data.length; i++) {<br />
const node = graphSeries.data[i]<br />
if (node.itemStyle && node.itemStyle.borderColor === '#ff0000' && node.x != null && node.y != null) {<br />
recentEffectPoints.push({<br />
name: node.name,<br />
value: [node.x, node.y],<br />
symbolSize: node.symbolSize + 10<br />
})<br />
}<br />
}<br />
<br />
if (recentEffectPoints.length > 0) {<br />
myChart.setOption({<br />
series: [<br />
...myChart.getOption().series,<br />
{<br />
type: 'effectScatter',<br />
coordinateSystem: null,<br />
data: recentEffectPoints,<br />
rippleEffect: {<br />
scale: 2.5,<br />
brushType: 'stroke'<br />
},<br />
itemStyle: {<br />
color: '#ff0000'<br />
},<br />
z: 100<br />
}<br />
]<br />
})<br />
}<br />
})<br />
<br />
window.addEventListener('resize', function () {<br />
myChart.resize()<br />
})<br />
})<br />
<br />
<br />
window.addEventListener('resize', function () {<br />
myChart.resize()<br />
})<br />
</script><br />
<br />
<br />
</body></html></div>
Fynn7