使用d3.behavior.drag（）平移地图

Question

我在地图上应用D3的behavior.drag（）时遇到了一些问题。 在这个例子中，拖动地图导致一个非常快的平移，点击的点不会留在鼠标 - http://bl.ocks.org/jczaplew/6453048

我的拖动行为代码如下所示 -

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);
});

我需要的：

1. 平移而不翻译整个SVG。 平移地图的能力（在这个问题中表达的一个问题 - 使用d3.js缩放和平移以太平洋为中心的墨卡托地图并在此示例中演示 - http://bl.ocks.org/d3noob/4966228 ）不可取的。
2. 当用户点击并拖动地图时，点击的点会粘到光标上（即点击并拖动西班牙旋转地图绕西班牙）

我怀疑这个问题与drag.origin（）有关，但也许我根本不应该使用d3.behavior.drag（）？ 非常感谢任何和所有的帮助！

Answer 1

我想我找到了一个潜在的（尽管稍微不满意）答案。 使用此示例中的逻辑（ http://mbostock.github.io/d3/talk/20111018/azimuthal.html ）我创建了这个 - http://bl.ocks.org/jczaplew/6457917

关键位是跟踪拖动开始的位置（即用户点击时）。 lat和long所需旋转的逻辑是

开始投影旋转+（开始屏幕位置 - 目标屏幕位置）/ 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);
    });

这仍然感觉相当hacky，它似乎没有很好的扩展。 例如，改变投影和投影比例似乎需要将所需旋转坐标的标准化从4调整为其他，以实现相同的平滑度和行为。

有没有其他想法？ 我很想看到其他更优雅的方法来实现这一功能。