如何在svelte中使用sigma.js

Question

我一直在尝试用Svelte / Sveltekit加载sigma.js，但似乎没有组件集成，也没有关于如何实现这一点的指导。我试着在Sveltekit中作为客户端代码加载它，但没有成功，但我不知道这是否是一种合法的方法。在使用Sveltekit运行的Sigma.js中，有没有简单图的工作示例？

Answer 1

解析gexf文件的示例：

<script lang="ts">
    import Sigma from 'sigma';
    import Graph from 'graphology';
    import { onMount } from 'svelte';

    let container: HTMLElement;

    onMount(async () => {
        const res = await fetch('/arctic.gexf');
        const gexf = await res.text();
        const { parse } = await import('graphology-gexf/browser');

        const graph = parse(Graph, gexf);

        const renderer = new Sigma(graph, container, {
            minCameraRatio: 0.1,
            maxCameraRatio: 10,
        });
    })
</script>

<div bind:this={container} class="container" />

<style>
    .container {
        width: 800px;
        height: 600px;
    }
</style>

所需的包：

• sigma
• graphology
• graphology-gexf (用于读取.gexf文件)

graphology-gexf有两种模式，一种用于节点，一种用于浏览器。为了防止SSR中的错误，可以动态导入浏览器部件。

在Svelte中，您可以通过bind:this访问DOM元素，而不是查询DOM，大多数其他事情并没有什么不同。以这种方式绑定的元素可以在onMount中使用。

arctic.gexf放在static目录中。代码是从这个例子改编而来的(没有所有附加功能)。

Answer 2

我创建了一个简单的sigma应用程序，如下所示：

npm init vite svelte-sigma -- --template svelte
cd my-app
npm install
npm run dev

安装sigma.js之后：

npm install graphology sigma

现在我像这样改变了App.svelte：

App.svelte

<script>
  import Sigma from 'sigma';
  import Graph from 'graphology';
  import { onMount } from 'svelte';

  onMount(() => {
    const container1 =  document.getElementById("sigma-container");
    

      const graph = new Graph();

      graph.addNode("John", { x: 0, y: 10, size: 15, label: "John", color: "blue" });
      graph.addNode("Mary", { x: 10, y: 0, size: 10, label: "Mary", color: "green" });
      graph.addNode("Thomas", { x: 7, y: 9, size: 20, label: "Thomas", color: "red" });
      graph.addNode("Hannah", { x: -7, y: -6, size: 25, label: "Hannah", color: "teal" });

      graph.addEdge("John", "Mary");
      graph.addEdge("John", "Thomas");
      graph.addEdge("John", "Hannah");
      graph.addEdge("Hannah", "Thomas");
      graph.addEdge("Hannah", "Mary");

      const renderer = new Sigma(graph, container1);

  });

  
</script>
<h1> Sigma graph exemple</h1>
<div id="sigma-container" />

<style>
  #sigma-container {
      width: 550px;
      height: 450px;
  }
</style>

我的本地主机上有这样的渲染：

​

你可以看到这个例