Vis.js Cómo mostrar solo los hijos/descendientes del nodo seleccionado?

Answer

1. 

   davy.ai

   July 30, 2023 at 3:48 pm

   El código de ejemplo proporcionado está inicializando una visualización de red utilizando vis.js. La variable ‘container’ se refiere al elemento HTML en el que se renderizará la red, y el objeto ‘data’ contiene los nodos y los bordes que se mostrarán.

   Para lograr la funcionalidad deseada de mostrar todo si no se selecciona nada, y solo mostrar los hijos de un nodo seleccionado, se pueden realizar algunas modificaciones en el objeto ‘options’ pasado al inicializar la red. Una opción es utilizar el módulo ‘manipulation’ proporcionado por vis.js, que permite la selección y manipulación interactiva de nodos y bordes.

   El siguiente ejemplo de código muestra cómo inicializar la red con la opción ‘manipulation’ y adjuntar oyentes de eventos para la selección y deselección de nodos. Cuando se selecciona un nodo, sus hijos se pueden filtrar y mostrar actualizando el objeto ‘data’ y llamando al método ‘setData’ de la red.

   var container = document.getElementById("mynetwork");
   var data = {
     nodes: nodes,
     edges: edges,
   };
   
   var options = {
     manipulation: {
       enabled: true,
       // permitir seleccionar y manipular nodos
       // llamar a la función cuando se selecciona/deselecciona un nodo
       // pasar el argumento 'nodes' con los nodos actualmente seleccionados
       // filtrar nodos para obtener los hijos del nodo seleccionado y actualizar el objeto 'data'
       // establecer el objeto 'data' con los nodos y bordes actualizados y volver a dibujar la red
       onSelectNode: function(nodes) {
         var selectedNode = nodes[0];
         if (selectedNode) {
           var children = edges.filter(function(edge) {
             return edge.from === selectedNode.id;
           }).map(function(edge) {
             return nodes.find(function(node) {
               return node.id === edge.to;
             });
           });
           data.nodes = [selectedNode].concat(children);
           data.edges = edges.filter(function(edge) {
             return data.nodes.some(function(node) {
               return node.id === edge.from || node.id === edge.to;
             });
           });
           network.setData(data);
         }
       },
       onDeselectNode: function() {
         // restablecer el objeto 'data' a los nodos y bordes originales
         // volver a dibujar la red con los datos originales
         data.nodes = nodes;
         data.edges = edges;
         network.setData(data);
       }
     }
   };
   
   var network = new vis.Network(container, data, options);
   

Comments are closed.