D3手動變焦，如何設置變焦平移

Question

我需要手動做一個轉換，因爲我知道d3變焦，變焦不會聽我的手動變焦，所以手動變焦後，當我用鼠標拖動或者鼠標滾輪滾動，d3縮放將從前一個位置（平移）開始事件，並以d3縮放存儲的縮放值顯示，這對於我的地圖非常可怕。所以我需要在手動縮放後設置縮放比例和縮放比例，並且可以設置縮放比例，但我不知道設置縮放比例的值。

 g.transition() 
     .duration(1000) 
     .attr("transform", "translate(" + (window_width/2 + translateX) + "," + (window_height/2) + ")scale(" + zoomLevel + ")translate(" + (-x + 10) + "," + -y + ")") 
     .each("end", function() { 
      if (zoomLevel > 1) { 
       $("#zoom_control").show(); 
       showCenteredTextInCircle(); 
       // zoom.scale(zoomLevel); 
       // zoom.translate([x*zoomLevel, y*zoomLevel]); 
      } 
     }); 

此代碼是從d3-zoom-example

任何一個參考知道右變焦手動我過渡？謝謝翻譯後的價值！

Answer 1

縮放比例和縮放轉換存儲在您的縮放對象中。我猜你有一行代碼，看起來像：

var zoom = d3.behavior.zoom() 
      .translate([0, 0]) 
      .scale(1).scaleExtent([1, 3]) 
      .on("zoom", zoomed); 

可以在初始規模和翻譯的第一時間值，這種類型的定義可以幫助你限制縮放比例和初始轉換，如果變焦倍數是1或縮放事件開始時。注意這一切都是可選的，你可以使用這種定義：

var zoom = d3.behavior.zoom(); 

因此獲得規模和從該對象翻譯很簡單：

var scale=zoom.scale(); var position=zoom.translate(); 

如果你尋找一些方法來做過渡手動手動或做規模，你必須使用此功能：

function interpolateZoom(translate, scale) { 

       return d3.transition().duration(150).tween("zoom", function() { 
        var iTranslate = d3.interpolate(zoom.translate(), translate), 
         iScale = d3.interpolate(zoom.scale(), scale); 

        return function(t) { 
         zoom.scale(iScale(t)).translate(iTranslate(t)); 
        }; 
       }); 
      }; 

zoomed是我定義要放大事件調用一個函數，你可以添加你譯吃了這個功能看起來像：

function zoomed() { 
     g.transition().duration(1000) 
     .attr("transform", "translate(" + (window_width/2 + translateX) + "," + (window_height/2) + ")scale(" + zoomLevel + ")translate(" + (-x + 10) + "," + -y + ")") 
     .each("end", function() { 
      if (zoomLevel > 1) { 
       $("#zoom_control").show(); 
       showCenteredTextInCircle(); 
       interpolateZoom([x*zoomLevel, y*zoomLevel],zoomLevel); 
       // zoom.scale(zoomLevel); 
       // zoom.translate([x*zoomLevel, y*zoomLevel]); 
      } 
     }); 
    } 

我希望這可以幫助你。