grapheco / InteractiveGraph

InteractiveGraph provides a web-based interactive visualization and analysis framework for large graph data, which may come from a GSON file, or an online Neo4j graph database. InteractiveGraph also provides applications built on the framework: GraphNavigator, GraphExplorer and RelFinder.
BSD 2-Clause "Simplified" License
1.05k stars 251 forks source link

读取json文件中的数据出现431状态码 #82

Open RookieTerry opened 5 months ago

RookieTerry commented 5 months ago

如题,前端环境是vue3+typescript,我的json数据存储在本地,但是不知道为什么,数据的内容出现在了http请求get参数中,导致报错431 (Request Header Fields Too Large)。数据的内容不应该以http请求的方式读取吧? vue文件中script标签代码如下:

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
// 导入JSON数据
import kgOneData from './kg_one.json';

const graphArea = ref<HTMLElement | null>(null);

// 动态加载 CSS
function loadCSS(href: string): void {
  const cssLink = document.createElement('link');
  cssLink.href = href;
  cssLink.rel = 'stylesheet';
  cssLink.type = 'text/css';
  document.head.appendChild(cssLink);
}

// 动态加载 JS
function loadJS(src: string): Promise<HTMLScriptElement> {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error(`Script load error for ${src}`));
    document.body.appendChild(script);
  });
}

onMounted(async () => {
  // 加载 CSS
  loadCSS('/lib/interactive-graph-0.1.0/interactive-graph.min.css');
  loadCSS('/lib/jquery-3.2.1/jquery-ui.css');
  loadCSS('/lib/font-awesome-4.7.0/css/font-awesome.min.css');

  // 顺序加载 JS
  await loadJS('/lib/jquery-3.2.1/jquery-3.2.1.min.js');
  await loadJS('/lib/jquery-3.2.1/jquery-ui.js');
  await loadJS('/lib/interactive-graph-0.1.0/interactive-graph.min.js');

  // 确保 interactive-graph 和 jQuery 已加载
  // 这里假设你已经以某种方式声明了 `igraph` 的类型
  if (graphArea.value) {
    // 类型断言,假设已经为 GraphNavigator 声明了类型
    const app = new (igraph as any).GraphNavigator(graphArea.value, 'LIGHT');
    app.loadGson(kgOneData, {
      "onGetNodeDescription": function(node: any) {
        let description = "<p align=center>";
        if (node.image !== undefined) {
          description += "<img src='" + node.image + "' width=150/><br>";
        }
        description += "<b>" + node.label + "</b>" + "[" + node.id + "]";
        description += "</p>";
        if (node.info !== undefined) {
          description += "<p align=left>" + node.info + "</p>";
        } else {
          if (node.title !== undefined)
            description += "<p align=left>" + node.title + "</p>";
        }
        return description;
      }
    }, function() {});
  }
});
</script>
HC-teemo commented 4 months ago

This doesn't seem to be a problem with InteractiveGraph. The json file imports fine in a html+js demo.