我有一个具有平移和缩放功能的拓扑图.
单击该国家/地区,我将缩放/平移到该国家/地区,使用此:
if (this.active === d) return var g = this.vis.select('g') g.selectAll(".active").classed("active", false) d3.select(path).classed('active', active = d) var b = this.path.bounds(d); g.transition().duration(750).attr("transform","translate(" + this.proj.translate() + ")" + "scale(" + .95 / Math.max((b[1][0] - b[0][0]) / this.options.width, (b[1][1] - b[0][1]) / this.options.height) + ")" + "translate(" + -(b[1][0] + b[0][0]) / 2 + "," + -(b[1][1] + b[0][1]) / 2 + ")"); g.selectAll('path') .style("stroke-width", 1 / this.zoom.scale())
但是,如果我继续拖动平移,则在平移之前,地图会重新回到初始位置,然后再进行平移.平移/缩放代码在这里:
this.zoom = d3.behavior.zoom().on('zoom', redraw) function redraw() { console.log('redraw') _this.vis.select('g').attr("transform","translate(" + d3.event.translate.join(",") + ")scale(" + d3.event.scale + ")") _this.vis.select('g').selectAll('path') .style("stroke-width", 1 / _this.zoom.scale()) } this.vis.call(this.zoom)
换句话说,通过单击,然后通过重绘功能拖动来缩放点后,重绘不会选择正确的translate + scale来继续.
要在转换后继续右移"缩放",我必须将缩放设置为新的平移和缩放.
与我的点击和缩放事件类似地应用的重置示例,设置的新缩放点是关键位:
_this.vis.select('g').transition().duration(1000) .attr('transform', "translate(0,0)scale(1)") /* SET NEW ZOOM POINT */ _this.zoom.scale(1); _this.zoom.translate([0, 0]);