Angularjs kullanarak visjs uzaklaştırma düğmelerini zoom eklemek nasıl?

Question

Angularjs kullanarak visjs network graph dizinine yakınlaştırma ve küçültme modundayken yardım gerekiyor. Bunun için ilgili herhangi bir seçenek bulamadık. Lütfen yardım edin, ben de bir örnek olarak bir sağlayan am

Kod

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

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

Answer 1

interaction, navigationButtons seçeneğine bir göz atın. Yakınlaştırma, kaydırma ve sıfırlama kontrolü için kontroller oluşturdu.

Sen keyboard kısayolları etkin olması navigationButtons: true ve keyboard: true içerecek şekilde vis seçenekleri değiştirmek gerekir

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

Kontrol bu plunker

Answer 2

Ben plunker ile hiç çalışmadım, bu yüzden senin Örneğin içine benim çözüm entegre olamaz, ama JSFiddle oluşturduk Bunun için visjs.org web sitesinden basit bir ağ örneğine dayanmaktadır.

Maalesef şu anda setScale(scale) metodu mevcut değil, ancak bunu uygulayana kadar network'u genişletebilirsiniz.

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); 
}; 

vis.Network.setScale kod getScale() yaptıklarını dayalı Network.js ve View.js kaynak kodundan alınmıştır. View.fit, View._getRange ve View._findCenter yöntemlerinin yaptığı bazı şeyleri yeniden yapmak zorunda kaldım ama şu ana kadar iyi çalışıyor.