Me gustaría simplemente mostrar/ocultar las etiquetas de los bordes de mi red vis.js. ¿Es esto posible?
He intentado actualizar los bordes en la estructura vis.js-data:
label - no funcionalabel en undefined : no funcionalabel en '' - no funcionalabel en ' ' - funcionaPreferiría un conmutador de red de algún tipo, pero no he encontrado uno.
¿Hay una mejor manera de hacer esto?
Una alternativa a la actualización de la propiedad de la label en cada borde es cambiar el color de la fuente para que sea transparente para todos los bordes. El método setOptions() se puede usar para actualizar las opciones y aplicará todos los bordes en la red. Las opciones edges.font.color y edges.font.strokeColor deben actualizarse y luego volver a sus valores originales para mostrar los bordes.
Ejemplo a continuación y también en https://jsfiddle.net/rk9s87ud/ .
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" }, ]); var edges = new vis.DataSet([ { from: 1, to: 2, label: 'Edge 1' }, { from: 2, to: 3, label: 'Edge 2' }, { from: 3, to: 4, label: 'Edge 3' }, { from: 4, to: 5, label: 'Edge 4' }, ]); var container = document.getElementById("mynetwork"); var data = { nodes: nodes, edges: edges, }; var options = { nodes: { // Set any other options, for example node color to gold color: 'gold' }, edges: { font: { // Set to the default colors as per the documentation color: '#343434', strokeColor: '#ffffff' } } } var hiddenEdgeTextOptions = { edges: { font: { // Set the colors to transparent color: 'transparent', strokeColor: 'transparent' } } }; var network = new vis.Network(container, data, options); var displayLabels = true; document.getElementById('toggleLabels').onclick = function() { if(displayLabels){ // Apply options for hidden edge text // This will override the existing options for text color // This does not clear other options (eg node.color) network.setOptions(hiddenEdgeTextOptions); displayLabels = false; } else { // Apply standard options network.setOptions(options); displayLabels = true; } } #mynetwork { width: 600px; height: 160px; border: 1px solid lightgray; } <script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script> <button id="toggleLabels">Toggle labels</button> <div id="mynetwork"></div>