![](/img/trans.png)
[英]How to add zoom-in and zoom-out buttons in dc.geoChoroplethChart
[英]How to add zoom in zoom out buttons in visjs using angularjs?
看看交互,navigationButtons选项。 它内置了缩放,平移和重置视图控件。
您需要更改vis选项以包含navigationButtons: true
和keyboard: true
以启用keboard快捷方式
$scope.options = {
autoResize: true,
height: '600',
width: '100%',
interaction: {
navigationButtons: true,
keyboard: true
}
};
检查这个plunker
我从未使用过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
方法View.fit
一些事情,但到目前为止它还运行良好。
更新了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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.