1

¿Me podrían ayudar a saber cómo se puede deshabilitar un nodo en vis network. Intenté con un disabled, pero no lo acepta.

Solo quiero que se muestren dos nodos activos y los demás desactivados, o bloqueados. Ya lo intenté, pero no se desactivan.

<!DOCTYPE html>
<html>
  <head>
    <title>Network</title>
    <script
      type="text/javascript"
      src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"
    ></script> 
    <style type="text/css">
      #mynetwork {
        width: 600px;
        height: 400px;
        border: 1px solid lightgray;
      }
    </style> 
  </head>
  <body>
    <div id="mynetwork"></div>
    <script type="text/javascript">
      // create an array with nodes
      var nodes = new vis.DataSet([
        { id: 1, label: "Node 1" },
        { id: 2, label: "Node 2" },
        { id: 3, label: "Node 3" },
        { id: 4, label: "Node 4" },
        { id: 5, label: "Node 5" },
      ]);
 
      // create an array with edges
      var edges = new vis.DataSet([
        { from: 1, to: 3 },
        { from: 1, to: 2 },
        { from: 2, to: 4 },
        { from: 2, to: 5 },
        { from: 3, to: 3 },
      ]);
 
      // create a network
      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodes,
        edges: edges,
      };
      var options = {};
      var network = new vis.Network(container, data, options);
    </script> 
  </body>
</html>

Esta es la imagen de como se muestran actualmente introducir la descripción de la imagen aquí

1 respuesta 1

0

Es al revés, enabled: false. Sin embargo, esta opción apunta a deshabilitar la interface de configuración de la red exclusivamente.

Hay varias opciones para jugar con la física, la mayoría dentro de la configuración de nodos, que te recomiendo leer: https://visjs.github.io/vis-network/docs/network/nodes.html

Estas son las que me parecen más genéricas para tu caso, y las aplico al ejemplo:

  • fixed: true (nodos 1 y 2 -no se mueven)
  • chosen: false (nodo 2 -que no tenga efecto al seleccionar, también apliqué a edges)
  • color: 'algun-color' (nodos 1 y 3 en gris)
  • hidden: true (nodo 4 -no aparece)

<!DOCTYPE html>
<html>
  <head>
    <title>Network</title>
    <script
      type="text/javascript"
      src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"
    ></script> 
    <style type="text/css">
      #mynetwork {
        width: 600px;
        height: 400px;
        border: 1px solid lightgray;
      }
    </style> 
  </head>
  <body>
    <div id="mynetwork"></div>
    <script type="text/javascript">
      // create an array with nodes
      var nodes = new vis.DataSet([
        { id: 1, label: "Node 1", fixed: true, color: 'gray' },
        { id: 2, label: "Node 2", fixed: true, chosen: false },
        { id: 3, label: "Node 3", color: 'rgb(200,200,200)'},
        { id: 4, label: "Node 4", hidden: true },
        { id: 5, label: "Node 5" },
      ]);
 
      // create an array with edges
      var edges = new vis.DataSet([
        { from: 1, to: 3 },
        { from: 1, to: 2, chosen: false },
        { from: 2, to: 4, chosen: false },
        { from: 2, to: 5, chosen: false },
        { from: 3, to: 3 },
      ]);
 
      // create a network
      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodes,
        edges: edges,
      };
      var options = {};
      var network = new vis.Network(container, data, options);
    </script> 
  </body>
</html>

3
  • Por lo que estás diciendo ahora, me imagino que te referís al efecto que tiene al seleccionar, con chosen: false ... recién edité la respuesta, fijate en nodo 2 (también habría que aplicar a los edges si querés el efecto ahí)
    – Pollo
    Commented el 13 oct. 2020 a las 3:32
  • Probablemente sea un error y que lo hayas escrito en el lugar equivocado... Podés ver en lo que publiqué, haciendo click en Ejecutar, que se genera sin dar errores en consola
    – Pollo
    Commented el 15 oct. 2020 a las 21:39
  • Publlicá el código completo como una nueva pregunta
    – Pollo
    Commented el 15 oct. 2020 a las 21:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.