0
464
ViewsCómo usar sigma.js con svelte
He estado intentando cargar sigma.js con Svelte/Sveltekit pero parece que no hay integración de componentes ni orientación sobre cómo hacerlo. Intenté cargarlo como código solo para el cliente en Sveltekit sin éxito, pero no tengo idea de si este es un enfoque legítimo. ¿Hay algún ejemplo de trabajo de un gráfico simple en Sigma.js que se ejecuta con Sveltekit?
2 answers
Answer question0
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).
0
Creé una aplicación simple svelte-sigma como esta:
npm init vite svelte-sigma -- --template svelte cd my-app npm install npm run devdespués de instalar sigma.js:
npm install graphology sigmaAhora 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