![](/img/trans.png)
[英]How to change speed of translate and scale when zooming in and out in D3 (using zoom.on & d3.event.translate, d3.event.zoom)?
[英]How do I change the speed of the zoom in D3
我目前正在使用鼠标滚轮放大和缩小D3力向图。
有没有一种放大或缩小速度的方法
例如,假设当我移动鼠标滚轮时,刻度当前正在这样移动:
1,2,3,4,5.
我希望移动它:
1,1.5,2,2.5,3
等等。
这是我的缩放功能:
var minZoom = 0.2,
maxZoom = 2.5;
var zoom = d3.behavior.zoom()
.on("zoom", redraw)
.scaleExtent([minZoom, maxZoom])//-call zoom but put scale extent on to limit zoom in/out
;
我的重画:
function redraw() //-redraw network
{
var trans=d3.event.translate;
var scale=d3.event.scale;
svg.attr("transform","translate(" + trans + ")" + " scale(" + scale + ")"); //-translates and scales
}
您可以在重绘功能中截取并调整比例:
function redraw() //-redraw network
{
var trans=d3.event.translate;
var scale=d3.event.scale;
var newScale = scale / 2;
zoom.scale(newScale);
svg.attr("transform","translate(" + trans + ")" + " scale(" + newScale + ")"); //-translates and scales
}
或者,如果您想要更具体的插值,则可以在重绘函数中添加诸如d3.linear.scale()之类的插值器:
function redraw() //-redraw network
{
scaleInterpolator = d3.linear.scale().domain([1,10,100,1000]).range9([1,3,9,99]);
var trans=d3.event.translate;
var scale=d3.event.scale;
svg.attr("transform","translate(" + trans + ")" + " scale(" + scaleInterpolator(scale) + ")"); //-translates and scales
}
我将其标记为重复项,原始答复在这里: 在D3中放大和缩小时如何更改平移和缩放的速度(使用zoom.on和d3.event.translate,d3.event.zoom)?
您可以根据自己的身高和宽度调整解决方案。 您也可以从this.getBBox().height
获取此信息。 应用比例尺后,此高度将具有值,请注意,您始终落后一步。 如果添加真实的高度和宽度,效果会更好。
function redraw() {
var scale = Math.pow(d3.event.scale,.1);
var translateY = (height - (height * scale))/2;
var translateX = (width - (width * scale))/2;
svg.attr("transform", "translate(" + [translateX,translateY] + ")" + " scale(" +scale+ ")");
};
在这一行: var scale = Math.pow(d3.event.scale,.1);
.1是速度因数,较小时则缓慢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.