angularjs का उपयोग करते हुए visjs में ज़ूम आउट बटन ज़ूम कैसे करें?

Question

angularjs का उपयोग करके visjs network graph में ज़ूम इन और ज़ूम आउट करने में सहायता की आवश्यकता है, मुझे इसके लिए कोई प्रासंगिक विकल्प नहीं मिल सका। कृपया मदद, मैं भी एक उदाहरण के रूप में एक प्रदान कर रहा हूँ

कोड

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

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

Answer 1

interaction, navigationButtons विकल्प पर एक नज़र डालें। यह ज़ूम, पैन और रीसेट दृश्य के लिए नियंत्रण में बनाया गया है।

आप keboard शॉर्टकट सक्षम करने के लिए अपने विज़ विकल्पों को बदलने के navigationButtons: true और keyboard: true शामिल करने की ज़रूरत

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

चेक इस plunker

Answer 2

मैं plunker के साथ काम किया कभी नहीं किया है, इसलिए मैं अपने उदाहरण में मेरी समाधान एकीकृत नहीं कर सकते, लेकिन मैं एक JSFiddle बना लिया है इसके लिए जो visjs.org वेबसाइट से एक साधारण नेटवर्क उदाहरण पर आधारित है।

दुर्भाग्य से अभी कोई setScale(scale) विधि उपलब्ध नहीं है, लेकिन आप इसे network तक बढ़ा सकते हैं जब तक कि कोई इसे लागू न करे।

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 कोड Network.js और View.js स्रोत कोड से लिया गया है, क्या getScale() किया पर आधारित है। मुझे कुछ चीजों को फिर से करना था जो View.fit, View._getRange और View._findCenter ने किया लेकिन यह अब तक अच्छा काम कर रहा है।