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

我已经在svg-Element中使用d3.js的mercator函数实现了一个map。该地图仅代表特定的城市 - 城市地图以外的所有内容与我的项目无关。如何限制在mercator地图上的d3.js拖动行为

现在我想在这张地图上实现一些像zoom（）和drag（）这样的函数。

但我找不到任何解决方案，用我的mercator-map处理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元素外...

来源

2016-04-15 GenXGer

你有个演出的例子吗？最好在JSFiddle上？ – thatOneGuy

https://jsfiddle.net/c55w7u9e/ – GenXGer

如果我的答案解决了问题，请选择绿色的勾号。如果没有，让我知道，并试图解决它 – thatOneGuy

更新提琴：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))); 
     }

从实例更新小提琴：https://jsfiddle.net/thatoneguy/c55w7u9e/5/

来源

2016-04-15 09:57:50 thatOneGuy

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

回答

相关问题