如何在墨卡托地图上限制 d3.js 拖动行为

Question

我已经在 svg-Element 中使用 d3.js 的墨卡托函数实现了一个地图。该地图仅代表一个特定的城市 - 城市地图之外的所有内容与我的项目无关。

现在我想在这张地图上实现一些功能，比如 zoom() 和 drag()。

但我找不到任何解决方案来使用我的 mercator-map 处理 drag()-函数 - 我无法限制转换区域。（用户应该无法将地图拖到城市地图之外）

对于普通的 svg-elements 这有效：

var drag = d3.behavior.drag()
                 .on("drag", dragmove);

function dragmove(d) {
    var x = Math.max(0, Math.min('width-of-svg-element', d3.event.x));
    var y = Math.max(0, Math.min('height-of-svg-element', d3.event.y));
    d3.select(this)
    .attr("transform", "translate(" + x + "," + y + ")");
    }

但它不适用于我的墨卡托地图。

请帮助我:(

提前致谢！

这是一个小例子： https://jsfiddle.net/c55w7u9e/

我的意图是，用户不应该将红色圆圈（在这个例子中，但在我的项目中是地图）拖到 svg 元素之外......

Answer 1

已更新 fiddle：https://jsfiddle.net/thatoneguy/c55w7u9e/4/

你没有考虑你的半径。它在工作，但你看不到它。更新拖动到此：

function dragmove(d) {
    var x = Math.max(0, Math.min(width - radius, d3.event.x));
    var y = Math.max(0, Math.min(height - radius, d3.event.y));
    d3.select(this)
    .attr("transform", "translate(" + x + "," + y + ")");
    }

这个问题的帮助：Explaining Mike Bostock's d3.js dragmove function

这个例子：http://bl.ocks.org/mbostock/1557377 //认为它是离线的...

我会用这个功能来限制，效果更好：

function dragmove(d) {
  d3.select(this)
      .attr("cx", d.x = Math.max(radius, Math.min(width - radius, d3.event.x)))
      .attr("cy", d.y = Math.max(radius, Math.min(height - radius, d3.event.y)));
        }

根据示例更新 fiddle：https://jsfiddle.net/thatoneguy/c55w7u9e/5/

如何在墨卡托地图上限制 d3.js 拖动行为

How to limit the d3.js drag behavior on a mercator map

svg

limit

drag

mercator

d3.js