¿Existe una extensión de diseño para Cytoscape que permita un comportamiento dinámico similar al del navegador Neo4j, es decir, cuando arrastra un nodo , sus bordes son elásticos en cierta medida, pero que también arrastra nodos a lo largo de parte del camino (yo lo llamaría gravedad localizada)?

Actualizar:El ejemplo en el que estoy trabajando utiliza la extensión de diseño CoSE Bilkent (compuesto), pero no parece admitir el efecto / animación que busco fuera de la caja. Esperaba que la opción apenas documentada { gravity: 1 } pudiera estar relacionada, después de todo, cuando un nodo arrastra a otros nodos, eso podría describirse como gravedad, pero cambiar la configuración en un pequeño gráfico de muestra no tuvo tal efecto; se produjeron algunas excavaciones y ahora creo que esa configuración tiene que ver con lo cerca que se muestran los nodos centrales del gráfico. Luego miré todas las demostraciones de diseño, ninguna parece mostrar el efecto que busco fuera del caja. AllegroViva parece implementar un comportamiento similar (video), pero, según tengo entendido, muestra una serie temporal en ese video (por lo que podría estar redibujando manualmente el gráfico). Su sitio web también parece estar inactivo.

Lo que estoy buscando es algo fácil, idealmente listo para usar, o algo que se pueda implementar rápidamente. Desafortunadamente, no estoy muy seguro de cuál sería el término de búsqueda correcto para lo que quiero (especialmente en el dominio de Cytoscape). De ahí que pregunte qué es, sin duda, una pregunta de muy alto nivel. Hoy descubrí que Visjs lo llama eventos físicos (o al menos usa el efecto que busco como parte de esa demostración), pero como mencioné, gravity en Cytoscape aparentemente no es lo que estoy buscando. En este punto, sin embargo, estoy simplemente tratando de establecer si Cytoscape es la biblioteca correcta , o si necesito mirar a otros, como Alchemy (véase su ejemplo de relación de filósofos).

2
Christian 25 ene. 2019 a las 19:59

3 respuestas

La mejor respuesta

Respuesta:

Gracias por editar la pregunta, creo que puedo ayudarte con esta. Cytoscape.js tiene esta característica enterrada en el diseños de extensión, específicamente en cytoscape.js-cola. El diseño es un diseño físico con nodos "elásticos", de modo que la distancia entre ellos se mantiene igual. El problema aquí es que en el párrafo Notas, el autor describe esto:

  • Si desea mantener la interactividad, probablemente no debería mezclar infinito: verdadero con ajuste: verdadero. El ajuste cambia naturalmente el nivel de zoom, lo que hace que arrastrar desalineado y se sienta extraño para los usuarios, aunque todavía funciona técnicamente. Mejor ajustar simplemente: falso cuando infinito: verdadero, y cy.center () o cy.fit () en layoutready.
  • La opción de alineación no es tan flexible como la opción de Cola sin procesar. Aquí, solo se pueden usar enteros para especificar el posicionamiento relativo, por lo que es un poco limitado. Si desea ver una implementación más sofisticada, envíe una solicitud de extracción.

Código:

Por lo tanto, este ejemplo debería funcionar (tenga en cuenta que los nodos se pueden mover, pero tienden a permanecer en formación debido a su posición ya óptima):

document.addEventListener("DOMContentLoaded", function() {
  var cy = (window.cy = cytoscape({
    container: document.getElementById("cy"),
    autounselectify: true,

    boxSelectionEnabled: false,
    layout: {
      name: "cola",
      infinite: true,
      fit: false
    },
    style: [{
        selector: "node",
        css: {
          "background-color": "#f92411"
        }
      },
      {
        selector: "edge",
        css: {
          "line-color": "#f92411"
        }
      }
    ],
    elements: {
      nodes: [{
          data: {
            id: "1",
            label: "P"
          }
        },
        {
          data: {
            id: "2",
            label: "sucrose phosphate phosphatase"
          }
        },
        {
          data: {
            id: "4",
            label: "sucrose 6-phosphate"
          }
        },
        {
          data: {
            id: "6",
            label: "sucrose"
          }
        },
        {
          data: {
            id: "8",
            label: "invertase"
          }
        },
        {
          data: {
            id: "10",
            label: "fructose"
          }
        },
        {
          data: {
            id: "12",
            label: "fructokinase"
          }
        },
        {
          data: {
            id: "14",
            label: "fructose 6-phosphate"
          }
        },
        {
          data: {
            id: "20",
            label: "phosphoglucose isomerase"
          }
        },
        {
          data: {
            id: "22",
            label: "glucose 6-phosphate"
          }
        },
        {
          data: {
            id: "28",
            label: "glucose"
          }
        },
        {
          data: {
            id: "30",
            label: "hexokinase"
          }
        },
        {
          data: {
            id: "33",
            label: "sucrose synthase"
          }
        },
        {
          data: {
            id: "36",
            label: "UDP - glucose"
          }
        },
        {
          data: {
            id: "38",
            label: "sucrose phosphate synthase"
          }
        },
        {
          data: {
            id: "41",
            label: "UDP"
          }
        },
        {
          data: {
            id: "44",
            label: "fructose 6-phosphate"
          }
        },
        {
          data: {
            id: "46",
            label: "ATP"
          }
        },
        {
          data: {
            id: "47",
            label: "ATP"
          }
        },
        {
          data: {
            id: "52",
            label: "ATP"
          }
        },
        {
          data: {
            id: "57",
            label: "ADP"
          }
        },
        {
          data: {
            id: "66",
            label: "PP"
          }
        },
        {
          data: {
            id: "71",
            label: "UTP"
          }
        },
        {
          data: {
            id: "76",
            label: "UDP glucose pyrophosphorylase"
          }
        },
        {
          data: {
            id: "80",
            label: "glucose 1-phosphate"
          }
        },
        {
          data: {
            id: "86",
            label: "phospho- glucomutase (cPGM)"
          }
        },
        {
          data: {
            id: "89",
            label: "G1P transporter"
          }
        },
        {
          data: {
            id: "90",
            label: "P"
          }
        },
        {
          data: {
            id: "95",
            label: "P"
          }
        },
        {
          data: {
            id: "102",
            label: "P"
          }
        },
        {
          data: {
            id: "103",
            label: "P"
          }
        },
        {
          data: {
            id: "104",
            label: "G6P transporter"
          }
        },
        {
          data: {
            id: "109",
            label: "glucose 6-phosphate"
          }
        },
        {
          data: {
            id: "115",
            label: "phospho- glucomutase (cPGM)"
          }
        },
        {
          data: {
            id: "121",
            label: "glucose 1-phosphate"
          }
        },
        {
          data: {
            id: "128",
            label: "ADPglucose pyrophosphorylase (pAGPase)"
          }
        },
        {
          data: {
            id: "130",
            label: "ADP - glucose"
          }
        },
        {
          data: {
            id: "136",
            label: "PP"
          }
        },
        {
          data: {
            id: "141",
            label: "ATP"
          }
        },
        {
          data: {
            id: "148",
            label: "inorganic diphosphatase"
          }
        },
        {
          data: {
            id: "149",
            label: "P"
          }
        },
        {
          data: {
            id: "156",
            label: "phosphate transporter"
          }
        },
        {
          data: {
            id: "158",
            label: "P"
          }
        },
        {
          data: {
            id: "164",
            label: "starch synthase (simpl.)"
          }
        },
        {
          data: {
            id: "166",
            label: "ADP"
          }
        },
        {
          data: {
            id: "172",
            label: "starch"
          }
        },
        {
          data: {
            id: "178",
            label: "ATP/ADP transporter"
          }
        },
        {
          data: {
            id: "179",
            label: "ADP"
          }
        },
        {
          data: {
            id: "184",
            label: "ADP"
          }
        },
        {
          data: {
            id: "189",
            label: "ATP"
          }
        }
      ],
      edges: [{
          data: {
            source: "2",
            target: "1"
          }
        },
        {
          data: {
            source: "4",
            target: "2"
          }
        },
        {
          data: {
            source: "2",
            target: "6"
          }
        },
        {
          data: {
            source: "6",
            target: "8"
          }
        },
        {
          data: {
            source: "8",
            target: "10"
          }
        },
        {
          data: {
            source: "12",
            target: "14"
          }
        },
        {
          data: {
            source: "14",
            target: "20"
          }
        },
        {
          data: {
            source: "20",
            target: "22"
          }
        },
        {
          data: {
            source: "8",
            target: "28"
          }
        },
        {
          data: {
            source: "28",
            target: "30"
          }
        },
        {
          data: {
            source: "30",
            target: "22"
          }
        },
        {
          data: {
            source: "6",
            target: "33"
          }
        },
        {
          data: {
            source: "33",
            target: "10"
          }
        },
        {
          data: {
            source: "33",
            target: "36"
          }
        },
        {
          data: {
            source: "36",
            target: "38"
          }
        },
        {
          data: {
            source: "38",
            target: "4"
          }
        },
        {
          data: {
            source: "38",
            target: "41"
          }
        },
        {
          data: {
            source: "41",
            target: "33"
          }
        },
        {
          data: {
            source: "44",
            target: "38"
          }
        },
        {
          data: {
            source: "52",
            target: "12"
          }
        },
        {
          data: {
            source: "12",
            target: "57"
          }
        },
        {
          data: {
            source: "46",
            target: "30"
          }
        },
        {
          data: {
            source: "30",
            target: "47"
          }
        },
        {
          data: {
            source: "71",
            target: "76"
          }
        },
        {
          data: {
            source: "76",
            target: "66"
          }
        },
        {
          data: {
            source: "76",
            target: "36"
          }
        },
        {
          data: {
            source: "80",
            target: "76"
          }
        },
        {
          data: {
            source: "22",
            target: "86"
          }
        },
        {
          data: {
            source: "86",
            target: "80"
          }
        },
        {
          data: {
            source: "95",
            target: "89"
          }
        },
        {
          data: {
            source: "89",
            target: "90"
          }
        },
        {
          data: {
            source: "102",
            target: "104"
          }
        },
        {
          data: {
            source: "80",
            target: "89"
          }
        },
        {
          data: {
            source: "104",
            target: "109"
          }
        },
        {
          data: {
            source: "115",
            target: "109"
          }
        },
        {
          data: {
            source: "121",
            target: "89"
          }
        },
        {
          data: {
            source: "121",
            target: "115"
          }
        },
        {
          data: {
            source: "121",
            target: "128"
          }
        },
        {
          data: {
            source: "128",
            target: "130"
          }
        },
        {
          data: {
            source: "141",
            target: "128"
          }
        },
        {
          data: {
            source: "128",
            target: "136"
          }
        },
        {
          data: {
            source: "136",
            target: "148"
          }
        },
        {
          data: {
            source: "148",
            target: "149"
          }
        },
        {
          data: {
            source: "149",
            target: "156"
          }
        },
        {
          data: {
            source: "156",
            target: "158"
          }
        },
        {
          data: {
            source: "130",
            target: "164"
          }
        },
        {
          data: {
            source: "164",
            target: "166"
          }
        },
        {
          data: {
            source: "178",
            target: "179"
          }
        },
        {
          data: {
            source: "184",
            target: "178"
          }
        },
        {
          data: {
            source: "178",
            target: "189"
          }
        },
        {
          data: {
            source: "141",
            target: "178"
          }
        },
        {
          data: {
            source: "104",
            target: "103"
          }
        },
        {
          data: {
            source: "10",
            target: "12"
          }
        },
        {
          data: {
            source: "164",
            target: "172"
          }
        },
        {
          data: {
            source: "22",
            target: "104"
          }
        }
      ]
    }
  }));
  cy.unbind("tapend");
  cy.bind("tapend", "node", function() {
    cy.animate({
      fit: {
        eles: cy.elements(),
        padding: 20
      },
      center: {
        eles: cy.elements()
      }
    }, {
      duration: 500
    });
  });
});
body {
  font-family: helvetica;
  font-size: 14px;
}

#cy {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
}

h1 {
  opacity: 0.5;
  font-size: 1em;
}
<!DOCTYPE>

<html>

<head>
  <title>cytoscape-cola.js demo</title>

  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>

  <!-- for testing with local version of cytoscape.js -->
  <!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->

  <script src="https://unpkg.com/webcola/WebCola/cola.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-cola@2.3.0/cytoscape-cola.min.js"></script>

</head>

<body>
  <h1>cytoscape-cola demo</h1>

  <div id="cy"></div>

</body>

</html>

Conclusión:

Cytoscape.js tiene la capacidad de mostrar el diseño de fuerza, pero es un poco peor que los dos ejemplos que proporcionó (pueden mostrar el gráfico sin mover los nodos a su posición óptima, pero el usuario prefirió uno). Si le gusta usar cytoscape.js, puede hacerlo bien, pero siempre considere qué casos de uso necesita y verifique, si alguna otra aplicación puede manejar la situación mejor (cytoscape.js tiene tantas características increíbles que puede usar, así que si puedes hacer que funcione, el cytoscape sería mi camino a seguir).

¡Buena suerte!

2
Stephan T. 28 ene. 2019 a las 06:02

Puede usar diseño dirigido por la fuerza de d3.js Aquí hay un gráfico de ejemplo.

Creo que el navegador Neo4j también usa d3.js

Desde el sitio web oficial:

El servidor Neo4j predeterminado tiene una herramienta de visualización de datos potente y personalizable basada en la biblioteca D3.js incorporada.

1
user3140972 28 ene. 2019 a las 21:10

Encontré un video que puede ser similar a su pregunta Uso de Cytoscape.js para el proyecto del Cliente, también hay otra extensión LAYOUT con d3.js cytoscape.js-d3- forzar que puede ser una buena referencia.

0
Bruce Fu 26 may. 2020 a las 08:49