0
258
Vistas¿Qué es el archivo de estilo React Sigma mencionado en su documentación de configuración?
Esta es la primera vez que hago gráficos en React, así que estoy siguiendo la guía y la documentación. No tengo experiencia previa con grafología, sigma.js o react-sigma (sé cómo usar React normal).
La documentación de instalación dice:
Importe el archivo de estilo React Sigma en su aplicación. Ejemplo:
import "@react-sigma/core/lib/react-sigma.min.css"
¿Qué son los archivos de estilo? ¿CSS? ¿Cómo puedo hacer uno? No puedo encontrar ninguna documentación. ¿Es algo básico de una biblioteca anterior?
Honestamente, me resulta muy difícil aprender sigma.js e insertarlo en mi sitio web de reacción. No puedo encontrar ninguna guía. ¿Hay alguno? Solo quiero comenzar con un gráfico simple y aprender de allí.
1 Respuestas
Responde la pregunta0
La documentación se refiere específicamente a su propio archivo CSS que debe importarse en una aplicación React como se muestra en el ejemplo:
import "@react-sigma/core/lib/react-sigma.min.css";Descargo de responsabilidad: dependiendo de la configuración de su aplicación React, la forma de importar un archivo CSS puede diferir.
El ejemplo en la documentación se rompió cuando escribí esta respuesta. Abrí un problema en el repositorio de react-sigma y se solucionó desde entonces.
Cuando lo probé, faltaban algunas dependencias y se necesitaban algunos cambios.
npm install @react-sigma/core sigma graphology graphology-types lodash import { useEffect } from "react"; import Graph from "graphology"; import { SigmaContainer, useLoadGraph } from "@react-sigma/core"; // Import the style file here import "@react-sigma/core/lib/react-sigma.min.css"; export const LoadGraph = () => { // first change to their example const loadGraph = useLoadGraph(); // also wrapped their graph instantiation side-effect with useEffect useEffect(() => { const graph = new Graph(); graph.addNode("first", { // Required position x: 1, y: 1, size: 15, label: "My first node", color: "#FA4F40" }); // Calling the function that was missing from the example loadGraph(graph); }, [loadGraph]); // Returning null to get a valid component return null; }; export const DisplayGraph = () => { return ( <SigmaContainer style={{ height: "500px", width: "500px" }}> <LoadGraph /> </SigmaContainer> ); }; 
Tenga en cuenta que utilicé TypeScript para el ejemplo, lo que genera mensajes de error perspicaces ya que react-sigma proporciona sus propios tipos.
Entonces quedó claro que el gancho useLoadGraph no se usó correctamente ya que no acepta ningún parámetro y devuelve una función que acepta un parámetro de graph . Esto se puede confirmar con ladocumentación de la API .
También pensé que faltaba lodash debido a errores en la consola del desarrollador.
Consulte la documentación , ya que ahora está actualizada.