En mi aplicación Next.js, estoy usando Cytoscape.js para producir visualizaciones de datos. Habilité la funcionalidad utilizando la biblioteca de menús contextuales de Cytoscape para permitir a los usuarios cambiar la etiqueta mostrada para un nodo utilizando una lista de opciones generada dinámicamente en función de las propiedades del nodo respectivo. Sin embargo, hay algunos casos en los que, después de modificar la etiqueta de un nodo, puede superponerse con la etiqueta de otro nodo cercano, ya que se hizo mucho más grande. Creo que necesito activar una nueva representación del diseño cada vez que un usuario interactúa con la visualización, de modo que el nodo con la etiqueta modificada se mueva para que no se superponga con la etiqueta de otro nodo que tendría de otra manera.

Probé la solución ( es decir , configurando infinite: true dentro del objeto de configuración de diseño) de una publicación con un título similar en Stack Overflow, pero desafortunadamente eso no funcionó para mí. ¿Alguien sabe de otros valores que pueda necesitar agregar en el objeto de configuración de diseño para asegurarme de que el diseño se vuelve a representar después de cada interacción del usuario? ¿O hay algo más que deba hacer? Para el contexto, estamos usando dos diseños en nuestra aplicación: dagre y concentric . Usamos el diseño dagre para el diseño jerárquico general de izquierda a derecha en nuestra visualización y el diseño concentric para organizar los nodos de marcador de posición alrededor de sus nodos principales. ¡Realmente agradecería cualquier ayuda con esto! He incluido mi código a continuación:

Código :

 const layoutConfig = { name: 'dagre', avoidOverlap: true, nodeDimensionsIncludeLabels: true, infinite: true, rankDir: 'LR', spacingFactor: 2, fit: false, }; const circleLayoutConfig = { name: 'concentric', minNodeSpacing: 100, avoidOverlap: true, nodeDimensionsIncludeLabels: true, infinite: true, fit: false, padding: 100, boundingBox: { x1: x, y1: y, w: 10, h: 10, }, }

FWIW, estoy usando Cytoscape.js v3.21.1 y Cytoscape Context Menus v4.1.0.