Как ограничить поведение перетаскивания d3.js на карте меркатора

Question

Я реализовал карту в svg-Element с функцией mercator d3.js. Карта представлена ​​только конкретным городом - все, что находится за пределами городской карты, не имеет отношения к моему проекту.

Теперь я хочу реализовать некоторые функции, такие как 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 + ")"); 
    } 

Но это не работает для моего Меркатора-карты.

пожалуйста, помогите мне :(

Заранее спасибо

Вот небольшой пример: https://jsfiddle.net/c55w7u9e/

Мое намерение состоит в том, что не должно быть никакой возможности пользователю перетаскивать красный круг (в этом примере, но в моем проекте - карта) вне элемента svg ...

Answer 1

Обновлено скрипт: 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/