如何限制在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拖動行爲

回答

相關問題