如何限制mercator地图上的d3.js拖动行为

Question

我已经用d3.js的mercator函数在svg元素中实现了一个map。地图只代表了一个特定的城市——城市地图之外的一切都与我的项目无关。

现在我想在这个地图上实现一些函数，比如zoom（）和drag（）。

但我找不到任何解决方案，要用我的mercator映射处理drag（）-函数，我无法限制转换的区域。（用户不能将地图拖到城市地图之外）

对于正常的svg元素，这是有效的：

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

这个问题的帮助：解释Mike Bostock'；s d3.js dragmove函数

这个例子：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/