我目前正在使用鼠标滚轮放大和缩小我的 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
}
关于javascript - 如何更改 D3 中的缩放速度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27798222/