使用d3.behavior.drag（）來移動地圖

我在地圖上應用D3的behavior.drag（）時遇到了一些問題。在這個例子中，拖動地圖的結果非常快鍋，並點擊了點不留鼠標 - http://bl.ocks.org/jczaplew/6453048 使用d3.behavior.drag（）來移動地圖

我拖行爲的代碼看起來是這樣的 -

var drag = d3.behavior.drag() 
    .origin(function() { return {x: rotate[0], y: -rotate[1]}; }) 
    .on("drag", function() { 
    rotate[0] = d3.event.x; 
    rotate[1] = -d3.event.y; 

    // Refresh the map 
    projection.rotate(rotate); 
    path = d3.geo.path().projection(projection); 
    d3.selectAll("path").attr("d", path); 
});

我需要什麼：

平移沒有翻譯整個SVG。平移地圖的能力（在這個問題中表達的擔心 - Zooming and Panning a Mercator Map centered on the Pacific using d3.js並在本例中演示 - http://bl.ocks.org/d3noob/4966228）是不可取的。
當用戶點擊和拖動地圖，點點擊枝光標（即點擊並拖動西班牙繞西班牙地圖）

我懷疑這個問題有事情做與drag.origin （），但也許我不應該使用d3.behavior.drag（）？任何和所有的援助非常感謝！

來源

2013-09-05 jczaplew

我想我發現了一個潛在的（儘管稍微不滿意）的答案。從這個例子（http://mbostock.github.io/d3/talk/20111018/azimuthal.html）使用邏輯我建立這個 - http://bl.ocks.org/jczaplew/6457917

的關鍵位是跟蹤拖動（即，當用戶點擊）的開始的位置。對lat和長的期望的旋轉的邏輯是

開始投影旋轉+（開始屏幕位置 - 目標畫面位置）/ 4

和拖動行爲現在看起來像這樣

var drag = d3.behavior.drag() 
     .on("dragstart", function() { 
      var proj = projection.rotate(); 
      m0 = [d3.event.sourceEvent.pageX, d3.event.sourceEvent.pageY]; 
      o0 = [-proj[0],-proj[1]]; 
     }) 
     .on("drag", function() { 
     if (m0) { 
      var m1 = [d3.event.sourceEvent.pageX, d3.event.sourceEvent.pageY], 
       o1 = [o0[0] + (m0[0] - m1[0])/4, o0[1] + (m1[1] - m0[1])/4]; 
      projection.rotate([-o1[0], -o1[1]]); 
     } 

     // Update the map 
     path = d3.geo.path().projection(projection); 
     d3.selectAll("path").attr("d", path); 
    });

這仍然感覺很不舒服，而且看起來不太好。例如，更改投影和投影比例似乎需要調整所需旋轉座標從4到其他值的歸一化，以獲得相同的平滑度和行爲。

任何人有其他想法嗎？我很想看到其他更優雅的方法來完成此功能。

來源

2013-09-06 14:24:09 jczaplew

使用d3.behavior.drag（）來移動地圖

回答

相關問題