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