[英]How to zoom properly using D3.js?
我正在尝试在D3图上进行缩放。
目前,我已经找到一种解决方案,可以在具有序数x轴的同时使我的缩放正常工作,但是我无法使x轴缩放与圆形和正方形元素匹配。 放大得越多,它们就越“错位”。
这是我当前代码的JS小提琴,在这里我尝试实现缩放。
http://jsfiddle.net/Vanquiza/c794g977/3/
我想知道如何正确实现缩放,以确保元素不会错位。
下面,我粘贴了缩放功能:
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;})
这是工作中的jsFiddle
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.