d3.js和SVG：平移，而在輸入/輸出放大不起作用

我有地圖，我使用D3在SVG繪製，且SVG是視框裏面，是這樣的：d3.js和SVG：平移，而在輸入/輸出放大不起作用

<svg id="mapcanvas" class="map-svg flow" viewBox="60 -20 800 500"> 

    <defs>...</defs> 
    <g class="zoomgroup" transform="translate(300,162.02921295166016)scale(0.5)"> 
     <rect class="mapocean" width="150%" height="150%" y="-150"></rect> 
     <g class="mapgroup"> 
      <path class="country AF" ...> 
      ...

我已經完成了標準的平移/縮放設置，它設置<g class="zoomgroup">的transform屬性。該代碼（略清理）是：

// zoomg is a d3 object represent the <g class="zoomgroup"> above 
var setupZoom = function(zoomg) { 
    var zoomed = function() { 
     var translate = d3.event.translate, 
      scale = d3.event.scale; 
     translate[0] = Math.max(-600*scale, Math.min(600*scale, translate[0])); 
     translate[1] = Math.max(-350*scale, Math.min(350*scale, translate[1])); 

     zoomg.attr("transform", "translate(" + translate + ")scale(" + scale + ")"); 
    }, 
    zoom = d3.behavior.zoom() 
     .translate([0, 0]) 
     .scale(1) 
     .scaleExtent([0.5, 20]) 
     .on("zoom", zoomed); 
    zoomg.call(zoom); 
}

該full code at this commit is on github。

縮放工作正常，當您處於初始縮放比例時也會平移。

當你放大（比例> 1）平移的「慢」 - 鼠標移動進一步比地圖呢，它會變得更糟進一步您正在放大

當你縮小（比例尺< 1）d3.event.translate數字可以很容易達到15000左右，此時地圖在屏幕之外。（這就是爲什麼我添加了最小/最大代碼，以阻止地圖消失）。

所以我真的不明白d3.event.translate數字在做什麼或者它們是如何生成的，以及它們如何與viewbox相關。我應該在d3.behaviour.zoom（）調用中添加x（）和y（）函數嗎？如果是的話，那些功能應該是什麼？

那麼你能幫助我在放大或縮小時獲得平滑的平移效果嗎？

來源

2014-11-25 Hamish Downer