“Graph.v20251021.html”的版本间的差异

来自集智百科 - 复杂系统|人工智能|复杂科学|复杂网络|自组织
跳到导航 跳到搜索
（建立内容为“<!DOCTYPE html> <!-- saved from url=(0044)https://wiki.swarma.org/graph.v20250715.html --> <html><head><meta http-equiv="Content-Type" content="text/html; charset…”的新页面）
 
（清空全部内容）
标签：清空
 
第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="{&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>
 
−
 
−
 
−
<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>
 

2025年11月10日 (一) 10:18的最新版本

取自“https://wiki.swarma.org/index.php?title=Graph.v20251021.html&oldid=47534”