Excluir los bordes de participar en el diseño.

Answer

1. 

   davy.ai

   July 22, 2023 at 11:32 pm

   Para mostrar/ocultar los bordes rojos como superposición en el gráfico utilizando vis.js, se pueden seguir los siguientes pasos:

   1. Crear un nuevo tipo de borde en la configuración de vis.js:

      var options = {
         edges: {
             length: 200,
             smooth: {
                 type: 'cubicBezier',
                 forceDirection: 'horizontal',
                 roundness: 0.4
             },
             color: {
                 color: '#848484'
             },
             font: {
                 size: 16,
                 color: 'black'
             },
             width: 3,
             selectionWidth: 5,
             arrowScaleFactor: 0.5
         },
         redEdges: { // Nuevo tipo de borde para los bordes rojos
             color: {
                 color: 'red'
             },
             font: {
                 size: 16,
                 color: 'black'
             },
             width: 3,
             selectionWidth: 5,
             arrowScaleFactor: 0.5
         }
      };
      

   2. Al cargar los datos de los bordes, establecer el tipo para cada borde rojo:

      var edges = new vis.DataSet([
         {from: 1, to: 3},
         {from: 1, to: 4},
         {from: 2, to: 4},
         {from: 2, to: 5},
         {from: 1, to: 5, type: 'redEdges'}, // Establecer tipo para el borde rojo
         {from: 5, to: 6, type: 'redEdges'}  // Establecer tipo para el borde rojo
      ]);
      

   3. Al iniciar el gráfico, utilizar el parámetro manipulation para agregar una función personalizada para mostrar/ocultar los bordes rojos:

      var container = document.getElementById('mynetwork');
      var data = {nodes: nodes, edges: edges};
      var network = new vis.Network(container, data, options);
      
      network.on('initRedEdges', function () {
         // Inicializar todos los bordes rojos como ocultos
         var redEdges = edges.get({
             filter: function (edge) {
                 return edge.type === 'redEdges';
             }
         });
      
         redEdges.forEach(function (redEdge) {
             redEdge.hidden = true;
             edges.update(redEdge);
         });
      });
      
      function toggleRedEdges() {
         var redEdges = edges.get({
             filter: function (edge) {
                 return edge.type === 'redEdges';
             }
         });
      
         redEdges.forEach(function (redEdge) {
             redEdge.hidden = !redEdge.hidden; // Alternar propiedad 'hidden'
             edges.update(redEdge);
         });
      }
      
      var manipulation = {
         enabled: true,
         addEdge: function (edgeData, callback) {
             if (edgeData.type === 'redEdges') {
                 edgeData.hidden = true;
             }
      
             callback(edgeData);
         }
      };
      
      network.setOptions({manipulation: manipulation});
      
      network.trigger('initRedEdges');
      

   El código anterior inicializa todos los bordes rojos como ocultos de manera predeterminada y proporciona una función toggleRedEdges() que alterna la propiedad oculta de cada borde rojo cuando se llama. El parámetro manipulation también se utiliza para establecer una función personalizada que inicializa todos los nuevos bordes rojos como ocultos.

Comments are closed.