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

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

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

但是我找不到任何解决方案，用我的墨卡托映射处理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 + ")");
    }

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

请帮助我：(

提前谢谢

下面是一个小例子：

我的意图是，用户不可能将红色圆圈（在本例中，但在我的项目中是地图）拖到svg元素之外…

更新的小提琴：

你没有考虑你的半径。它正在工作，但你看不到它。更新拖动到以下位置：

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

此问题的帮助：

这个例子是离线的

我会用这个函数来限制，它工作得更好：

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

更新的小提琴示例：

更新的小提琴：

你没有考虑你的半径。它正在工作，但你看不到它。更新拖动到以下位置：

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

此问题的帮助：

这个例子是离线的

我会用这个函数来限制，它工作得更好：

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:

您有没有示例可以展示？最好是在JSFIDLE上？您有没有示例可以展示？最好是在JSFIDLE上？