Así que quiero renderizar el siguiente elemento de Cytoscape pero al final no aparece nada en la pantalla.
let cy = cytoscape({ container: document.getElementById('cy'), elements: [ // list of graph elements to start with { // node a data: { id: 'a' } }, { // node b data: { id: 'b' } }, { // edge ab data: { id: 'ab', source: 'a', target: 'b' } }, { data: { id: 'c' } }, { data: { id: 'ac', source: 'a', target: 'c', 'value': 'ceva', 'value2': 'data(target)', } } ], style: [ // the stylesheet for the graph { selector: 'node', style: { 'background-color': 'red', 'label': 'data(id)' } }, { selector: 'edge', style: { 'width': 3, 'line-color': 'blue', 'target-arrow-color': '#ccc', 'target-arrow-shape': 'triangle', 'curve-style': 'bezier', } } ], layout: { name: 'grid', rows: 1 } }) cy.add([ { group: 'nodes', data: { id: 'n0' }, position: { x: 100, y: 100 } }, { group: 'nodes', data: { id: 'n1' }, position: { x: 200, y: 200 } }, { group: 'edges', data: { id: 'e0', source: 'n0', target: 'n1' } } ]);Este es el HTML:
<html> <head> <script src="./script.js"></script> </head> <body> <div id="cy"></div> <script src="./cyto.js"></script> </body> </html>Lo que me parece el problema es el hecho de que la clase Cytoscape termina teniendo la altura = 0. Después de modificar la clase en el elemento de inspección y agregar altura = 1000px, funciona bien en su mayoría. ¿Cuál podría ser la solución? Soy nuevo en Cytoscape, así que creo que esto podría ser un error básico.
Estoy usando cytoscape con este tipo de configuración:
<div id="cy" style="width: 900px; height: 800px;"></div>donde la altura y el ancho se establecen al principio.