Как добавить кнопки уменьшения масштаба в visjs, используя angularjs?

Question

Нужна помощь в том, чтобы иметь кнопку увеличения и уменьшения масштаба в сетевом графике visjs с помощью angularjs, я не смог найти соответствующие варианты для этого. Пожалуйста, помогите, я также даю ссылку на плункер в качестве примера

Код

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

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

Answer 1

Взгляните на взаимодействие, опция навигационных кнопок. Он имеет встроенные элементы управления для увеличения, панорамирования и сброса зрения.

Вам нужно изменить параметры vis, чтобы включить navigationButtons: true а также keyboard: true чтобы были включены горячие клавиши

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

Проверьте этот поршень

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 сделал, но пока работает хорошо

Answer 3

Обновленное решение для vis.js 4.21.0

vis.Network.prototype.zoom = function (scale) {
    const animationOptions = {
        scale: this.getScale() + scale,
        animation: { duration: 300 }
    };
    this.view.moveTo(animationOptions);
};

Нажмите код обработчика:

this.network.zoom(-0.5) // or 0.5 to zoom in