如何在 Svelte 中使用 sigma.js

Question

我一直在尝试在Svelte/Sveltekit中加载sigma.js，但似乎没有组件集成，也没有关于如何实现此操作的指导。我尝试将其作为客户端代码在Sveltekit中加载，但失败了，但我不知道这是否是一个合法的方法。是否有任何工作示例可以在Sveltekit中运行带有Sigma.js的简单图形？

- Francisco Gama T. R.

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有两种模式，分别为Node和Browser。为了防止在SSR中出现错误，浏览器部分可以进行动态导入。

在Svelte中，你可以通过bind:this访问DOM元素而无需查询DOM，大多数其他内容也没有太大的区别。以这种方式绑定的元素可以在onMount中使用。

arctic.gexf位于static目录中。代码来自此示例（不含所有附加功能）。

- H.B.

Answer 2

我创建了一个简单的Svelte-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>

我在本地主机上有这个渲染效果：

你可以查看这个示例

- Deotyma

---

谢谢你。感谢你的问题，我写了这篇小文章（https://dev.to/deotyma/how-to-use-sigmajs-with-sveltejs-166p）;-) - Deotyma