La representación en Cytoscape de los nodos y bordes guardados no se muestra en la posición correcta.

02 Aug, 2023 Programación 0

Estoy intentando representar un gráfico en su estado original a partir de un objeto JSON guardado que almacena las matrices de nodos y aristas y todos sus datos respectivos, incluyendo las posiciones x e y. Tengo una función onLoad que se activa cuando se carga la página:

const onLoad = (_core) => {
  core.current = _core;
  if (savedView.nodes && savedView.node != undefined) {
       let curElements = JSON.stringify({
            nodes: savedView.nodes;
            edges: savedView.edges;
       });
       let layout = core.current._cy.layout({ name: 'preset' });
       layout.run();
       core.current._cy.add(JSON.parse(curElements));

En el fragmento de código anterior, “_core” es el objeto del grafo de cytoscape principal que se pasa a la función y la variable “savedView” es un objeto que contiene las matrices de nodos y aristas que quiero extraer para usar al volver a representar el gráfico. Un ejemplo de un par de elementos contenidos en la matriz de nodos:

{
    classes: 'draft-entity',
    data: {
        id: 'rkb1',
        type: 'person',
        displayName: 'Bob',
        elementType: 'node',
    },
    grabbable: true,
    group: 'nodes',
    locked: false,
    pannable: false,
    position: {x: 334.85120850976364, y: 20},
    removed: false,
    selectable: true,
    selected: false,
}
{
    classes: 'draft-entity',
    data: {
        id: 'rkb2',
        type: 'person',
        displayName: 'Jane',
        elementType: 'node',
    },
    grabbable: true,
    group: 'nodes',
    locked: false,
    pannable: false,
    position: {x: 237, y: 149},
    removed: false,
    selectable: true,
    selected: false,
}

Cuando se agregan los nodos y aristas al gráfico, no se representan en la posición en la que se encontraban cuando se guardó el gráfico. No estoy seguro de qué estoy haciendo mal aquí. He revisado algunos hilos que mencionan el uso del diseño “preset”, pero la forma en que lo estoy implementando no parece estar funcionando.

const onLoad = (cy) => { if (savedView.nodes && savedView.edges) { // Recupera los nodos y aristas guardados y conviértelos en una cadena de texto let curElements = JSON.stringify({ nodes: savedView.nodes, edges: savedView.edges }); // Crea un nuevo objeto de diseño con el nombre "preset" let layout = cy.layout({name: 'preset'}); // Aplica el diseño al gráfico layout.run(); // Añade los nodos y aristas guardados de nuevo al gráfico cy.add(JSON.parse(curElements)); } };

Answer

davy.ai

August 2, 2023 at 8:43 pm
Para renderizar el gráfico a su estado original desde un objeto JSON guardado que contiene los arrays de nodos y aristas junto con sus respectivas coordenadas de posición, puedes probar el siguiente enfoque:
1. Recupera los arrays de nodos y aristas guardados del objeto JSON y conviértelos en una cadena de texto.
2. Crea un nuevo objeto de diseño con el nombre “preset” utilizando el método cy.layout().
3. Llama al método run() en el objeto de diseño para aplicar el diseño al gráfico.
4. Añade los nodos y aristas guardados de nuevo al gráfico utilizando el método cy.add(), y analiza los nodos y aristas stringificados de nuevo a JSON antes de añadirlos al gráfico.
Aquí tienes una versión actualizada del fragmento de código:
```
const onLoad = (cy) => {
  if (savedView.nodes && savedView.edges) {
    // Recupera los nodos y aristas guardados y conviértelos en una cadena de texto
    let curElements = JSON.stringify({
      nodes: savedView.nodes,
      edges: savedView.edges
    });

    // Crea un nuevo objeto de diseño con el nombre "preset"
    let layout = cy.layout({name: 'preset'});

    // Aplica el diseño al gráfico
    layout.run();

    // Añade los nodos y aristas guardados de nuevo al gráfico
    cy.add(JSON.parse(curElements));
  }
};
```
Asegúrate de llamar a la función onLoad cuando el gráfico se cargue, de esta manera:
```
cytoscape({
  container: document.getElementById('cy'),
  elements: [
    // elementos del gráfico aquí...
  ],
  layout: {
    name: 'grid'
  },
  ready: function() {
    onLoad(this);
  }
});
```
Esto debería renderizar el gráfico a su estado original con los nodos y aristas posicionados en sus coordenadas guardadas.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

La representación en Cytoscape de los nodos y bordes guardados no se muestra en la posición correcta.

Answer

davy.ai