Я пытаюсь масштабировать / перетаскивать прямоугольник от выхода за пределы svg при панорамировании и масштабировании. Я пытался реализовать это на основе этогопример, но я не могу заставить его работать. Я создалэто jsfiddle только с прямоугольником, который можно масштабировать и перетаскивать. Опять же, я пытаюсь сделать так, чтобы вы не могли перетащить прямоугольник за пределы поля svg, на котором я поставил границу. Я знаю, что мне нужно обновить функцию перемещения. приведенный ниже код взят из первого примера ссылки, но, похоже, он не работает должным образом, поэтому я прокомментировал его часть.

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

Редактировать: Так что дополнительно мне нужно иметь возможность перетаскивать прямоугольник, когда вы полностью увеличены и он больше, чем SVG. На изображении ниже синий прямоугольник - это svg, а зеленый - это прямоугольник, и вы будете масштабироваться полностью, поэтому зеленый прямоугольник занимает гораздо больше, чем SVG. Это похоже на карту впример ограниченного масштабирования, Вы можете увеличивать штаты и перетаскивать их по всей стране, перемещаясь к штатам за пределами текущего размера SVG.