3

在使用 angularjs 在vi​​sjs 网络图中放大和缩小按钮时需要帮助，我找不到任何相关选项。请帮忙，我还提供了一个plunker 链接作为示例

代码

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

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

3 回答 3

6

看一下交互，navigationButtons选项。它具有用于缩放、平移和重置视图的内置控件。

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

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

检查这个plunker

于 2015-07-02T06:05:53.570 回答
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做了一些事情，但到目前为止效果很好。

于 2015-06-29T13:01:05.863 回答
0

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
于 2019-03-19T12:09:40.380 回答