如何使用angularjs在visjs中添加放大缩小按钮？答案

【问题标题】：How to add zoom in zoom out buttons in visjs using angularjs?如何使用angularjs在visjs中添加放大缩小按钮？
【发布时间】：2019-03-19 20:09:40
【问题描述】：

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

代码

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

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

【问题讨论】：

您可以使用滚轮进行放大和缩小 -- 为什么需要单独的按钮来执行此操作？
@efeder：所有用户可能都没有带滚动条的鼠标，也有一些用户可能使用笔记本电脑，用户可能更喜欢对该图表进行一些控制。看看这个visjs example
我提供了一个类似http://tiddlymap.org/例子的解决方案

标签： javascript angularjs angularjs-directive vis.js vis.js-network

【解决方案1】：

看看interaction, navigationButtons 选项。它具有用于缩放、平移和重置视图的内置控件。

您需要更改 vis 选项以包括 navigationButtons: true 和 keyboard: true 以启用 keboard 快捷方式

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

检查这个plunker

【讨论】：

【解决方案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 所做的事情，但到目前为止效果很好。

【讨论】：

谢谢，看起来很棒，但我需要 Angularjs 的帮助，你能提供我使用 Angularjs 的解决方案吗？
对不起，我从未使用过 Angularjs。不能给你一个很好的解决方案。但是，您将我的代码放入您的 angularjs 应用程序中应该不会太难 - 现在您知道如何去做了吗？
感谢您的解决方案。我是 angularjs 新手，所以我想在 angularjs 中获得解决方案。

【解决方案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

【讨论】：