Question

我在地图上应用D3＆＃39的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);
});

我需要什么：

在不翻译整个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（）？非常感谢任何和所有的帮助！

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调整为其他，以实现相同的平滑度和行为。

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

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

1 个答案: