如何使用angularjs在visjs中添加缩放按钮？

Question

需要帮助使用angularjs在visjs network graph中放大和缩小按钮，我找不到任何相关的选项。请帮助，我也提供plunker link作为例子

码

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

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

Answer 1

看看interaction, navigationButtons选项。它内置了缩放，平移和重置视图控件。

您需要更改您的vis选项以包括qazxsw poi和qazxsw poi以启用键盘快捷键

navigationButtons: true

检查这个keyboard: true

Answer 2

我从未使用过plunker，因此我无法将我的解决方案集成到您的示例中，但我已经为它创建了一个

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

，它基于visjs.org网站上的简单网络示例。

不幸的是，目前没有可用的plunker方法，但你可以扩展JSFiddle，直到有人实现它。

setScale(scale)

network代码取自Network.js和View.js源代码，基于

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，getScale()和View.fit做的事情，但它到目前为止工作得很好。

Answer 3

更新了vis.js 4.21.0的解决方案

View._getRange

单击处理程序代码

View._findCenter