Cómo agregar puntos en línea visjs?

Answer

1. 

   davy.ai

   July 23, 2023 at 9:35 am

   Posible solución para agregar información de borde en la visualización de redes de Vis.js

   Si ha tenido problemas para agregar información adicional a los bordes de la visualización de redes de Vis.js, aquí hay algunas soluciones posibles que puede probar:

   1. Usar bordes personalizados: Una forma de agregar información adicional a los bordes es creando bordes personalizados. Los bordes personalizados pueden contener información en sus propiedades a las que puedes acceder y mostrar en la información sobre herramientas o etiquetas. Código de ejemplo para crear bordes personalizados:

   var edges = new vis.DataSet([
       {id: 1, from: 1, to: 2, label: 'Borde personalizado', customProperty: 'Información adicional'},
       // agregar más bordes personalizados
   ]);
   

   1. Usar la extensión Edge Labels: Otra solución es usar la extensión Edge Labels. Esta extensión agrega soporte para agregar etiquetas a los bordes, y puedes personalizar el contenido y la posición de la etiqueta. Aquí tienes un código de ejemplo para usar la extensión Edge Labels:

   var edges = new vis.DataSet([...]);
   
   var options = {
       edges: {
           font: {
               size: 12
           },
           labelHighlightBold: true,
           labelAlignment: {
               horizontal: 'center',
               vertical: 'bottom'
           }
       }
   };
   
   var network = new vis.Network(container, {nodes: nodes, edges: edges}, options);
   
   network.on("click", function (params) {
       if (params.edges.length > 0) {
           var edgeId = params.edges[0];
           var edge = edges.get(edgeId);
           console.log(edge.customProperty);
       }
   });
   

   1. Usar devoluciones de llamada de borde: Por último, puedes usar las devoluciones de llamada getEdgeLabel y getEdgeTitle para establecer dinámicamente el contenido de la etiqueta y la información sobre herramientas para cada borde en función de sus propiedades. Código de ejemplo para usar devoluciones de llamada de borde:

   var edges = new vis.DataSet([...]);
   
   var options = {
       edges: {
           font: {
               size: 12
           },
           labelHighlightBold: true,
           getLabel: function(edge) {
               return edge.customProperty;
           },
           getTitle: function(edge) {
               return edge.customProperty;
           }
       }
   };
   
   var network = new vis.Network(container, {nodes: nodes, edges: edges}, options);
   

   Puedes probar una o más de estas soluciones para agregar la información adicional deseada a tu visualización de redes de Vis.js.

Comments are closed.