Ejemplo para analizar un archivo 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>

Paquetes requeridos:

• sigma
• graphology
• graphology-gexf (para leer archivos .gexf )

graphology-gexf tiene dos modos, uno para el nodo y otro para el navegador. Para evitar errores en SSR, la parte del navegador se puede importar dinámicamente.

En Svelte, obtiene acceso a los elementos DOM a través de bind:this en lugar de consultar el DOM, la mayoría de las otras cosas no son tan diferentes. Los elementos vinculados de esta manera están disponibles en onMount .

arctic.gexf se coloca en el directorio static . El código está adaptado de este ejemplo (sin toda la funcionalidad adicional).

Creé una aplicación simple svelte-sigma como esta:

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

después de instalar sigma.js:

 npm install graphology sigma

Ahora cambié App.svelte así:

App.esbelta

 <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>

y tengo este render en mi localhost:

Puedes ver este ejemplo