Estou tentando zoomable / draggle retângulo de ir fora dos limites svg ao pan e zoom. Eu tentei implementá-lo com base nissoexemplo, mas não consigo fazê-lo funcionar. Eu crieieste jsfiddle com apenas o retângulo que pode ser zoomable e arrastável. Mais uma vez, estou tentando fazê-lo para que você não possa arrastar o retângulo para fora da caixa svg em que coloquei a borda. Eu sei que preciso atualizar a função Mover. o código abaixo é do primeiro exemplo de link, mas ele não parece funcionar bem, então comentei parte dele.

function move() {
  var t = d3.event.translate,
  s = d3.event.scale;

  //t[0] = Math.min(width / 2 * (s - 1), Math.max(width / 2 * (1 - s), t[0]));
  //t[1] = Math.min(height / 2 * (s - 1) + 230 * s, Math.max(height / 2 * (1 - s) - 230 * s, t[1]));
  //zoom.translate(t);
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

Edit: Então, adicionalmente, eu preciso ser capaz de arrastar o retângulo quando você estiver com zoom de todo o caminho e for maior que o svg. Na imagem abaixo, o retângulo azul é o svg e o verde seria o retângulo e você é ampliado até o fim para que o retângulo verde ocupe muito mais do que o SVG. Isso é semelhante ao mapa noexemplo de zoom restrito. Você pode ampliar os estados e arrastar pelo país, navegando para estados fora do tamanho svg atual