如何将 sigma.js 与 svelte 结合使用

Question

我一直在尝试使用 Svelte / Sveltekit 加载 sigma.js，但似乎没有组件集成，也没有任何关于如何执行此操作的指导。我尝试将其作为客户端代码加载到 Sveltekit 中，但没有成功，但我不知道这是否是合法的方法。Sigma.js 中是否有与 Sveltekit 一起运行的简单图表的工作示例？

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出现错误，可以动态导入浏览器部分。

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

arctic.gexf被放置在static目录中。代码改编自此示例（没有所有附加功能）。