Come aggiungere lo zoom nei pulsanti di zoom in visjs usando angularjs?

Question

Hai bisogno di aiuto per avere un pulsante di zoom in e zoom out in visjs network graph usando angularjs, non ho trovato nessuna opzione rilevante per questo. Si prega di aiuto, sto anche fornendo un come esempio

Codice

<vis-network data="data" options="options" height="100%"></vis-network> 

$scope.options = { 
    autoResize: true, 
    height: '800', 
    width: '100%' 
}; 

Answer 1

Dai un'occhiata all'opzione interaction, navigationButtons. Ha incorporato controlli per zoom, pan e reset della vista.

È necessario modificare le opzioni per includere confronti navigationButtons: true e keyboard: true avere scorciatoie keboard abilitati

$scope.options = { 
    autoResize: true, 
    height: '600', 
    width: '100%', 
    interaction: { 
     navigationButtons: true, 
     keyboard: true 
    } 
}; 

Scegli questa plunker

Answer 2

Non ho mai lavorato con plunker, quindi non posso integrato la mia soluzione nel tuo esempio, ma ho creato una JSFiddle per ciò che è basato su un semplice esempio di rete dal sito web visjs.org.

Purtroppo non è disponibile il metodo setScale(scale) al momento, ma è possibile estendere lo network fino a quando qualcuno non lo implementa.

var network; 
var zoomstep = 0.3; 

function zoomin() { 
    network.setScale(network.getScale() - zoomstep); 
} 

function zoomout() { 
    network.setScale(network.getScale() + zoomstep); 
} 

vis.Network.prototype.setScale = function (scale) { 
    var options = { 
     nodes: [] 
    }; 
    var range = this.view._getRange(options.nodes); 
    var center = this.view._findCenter(range); 
    var animationOptions = { 
     position: center, 
     scale: scale, 
     animation: options.animation 
    }; 
    this.view.moveTo(animationOptions); 
}; 

Il codice vis.Network.setScale è stata presa dal codice Network.js e la fonte View.js, sulla base di ciò che ha fatto getScale(). Ho dovuto ripetere alcune cose che i metodi View.fit, View._getRange e View._findCenter hanno funzionato bene finora.