D3 - 수동 확대/축소 및 원점 이동 후 정확한 축척 및 원점 변환 방법

Question

팬 및 확대/축소 기능이있는 토폴로지 맵이 있습니다. 국가를 클릭

, 나는이 사용 국가로 패닝/줌 해요 :

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) 

, 클릭 한 다음 다시 그리기 기능으로 드래그하여 지점을 확대 한 후, 다시 그리기가에서 계속 올바른 번역 + 스케일을 선택하지 않습니다 코드 줌은 여기/패닝합니다.

Answer 1

전환 후 오른쪽에서 '계속 확대'하려면 확대/축소를 새 번역 및 비율로 설정해야했습니다.

내 클릭 및 줌 이벤트에 유사하게 적용되는 리셋의 예는 설정 새로운 줌 포인트는 중요한 비트입니다 :

_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]);