Javascript 如何使用D3.js正确缩放?
我试图使缩放工作在我的D3图形 目前,我已经找到了一种解决方案,可以在使用顺序x轴的同时使缩放工作,但我在x轴缩放与圆形和方形元素匹配时遇到了问题。你放大的越多,它们就越“不合适” 这里是我当前代码的一个JS提琴,我试图在这里实现我的缩放 我想知道如何正确地实现我的缩放,以便元素不会不合适 下面我粘贴了缩放功能:Javascript 如何使用D3.js正确缩放?,javascript,jquery,css,d3.js,Javascript,Jquery,Css,D3.js,我试图使缩放工作在我的D3图形 目前,我已经找到了一种解决方案,可以在使用顺序x轴的同时使缩放工作,但我在x轴缩放与圆形和方形元素匹配时遇到了问题。你放大的越多,它们就越“不合适” 这里是我当前代码的一个JS提琴,我试图在这里实现我的缩放 我想知道如何正确地实现我的缩放,以便元素不会不合适 下面我粘贴了缩放功能: var zoom = d3.behavior.zoom() .scaleExtent([1, 10]) .on("zoom", zoomHandler); func
var zoom = d3.behavior.zoom()
.scaleExtent([1, 10])
.on("zoom", zoomHandler);
function zoomHandler() {
var translate = zoom.translate(),
scale = zoom.scale();
var tx = Math.min(0, Math.max(width * (1 - scale), translate[0]));
var ty = Math.min(0, Math.max(height * (1 - scale), translate[1]));
zoom.translate([tx, ty]);
//svg.select(".x.axis").call(xAxis);
svg.selectAll(".circleNodes")
.attr("transform", "translate(" + d3.event.translate[0]+",0)scale(" + d3.event.scale + ",1)");
svg.selectAll(".squareNodes")
.attr("transform", "translate(" + d3.event.translate[0]+",0)scale(" + d3.event.scale + ",1)");
svg.select(".x.axis").attr("transform", "translate(" + d3.event.translate[0]+","+(height)+")")
.call(xAxis.scale(x.rangeRoundBands([0, (width * d3.event.scale)],1 * d3.event.scale)));
}
非常感谢您的帮助 完全删除变换。所有的调整都可以通过修改序数刻度来完成,考虑到那里的翻译
x.rangeBands([d3.event.translate[0], d3.event.translate[0]+(width * d3.event.scale)], 1)
(切换到使用rangeBands()
而不是rangeRoundBands()
,这样可以消除抖动。)
然后,您只需调整所有圆和正方形的位置,并基于此新比例重新渲染轴
svg.select(".x.axis").call(xAxis)
circle.attr("cx", function(d){ return x(d);})
square.attr("x", function(d){ return x(d) - squareSize/2;})
这是工作指南非常感谢!正如您可能已经注意到的,我在图形中添加了剪切路径,其原因是为了防止轴从它们开始的“框”中走出。一旦开始缩放,它就会向左和向右移动,并离开其原始“bos”或位置。无论如何,感谢您的回复,这帮了大忙!