Ich versuche, das Rechteck zu zoomen / zu ziehen, damit es beim Schwenken und Zoomen nicht außerhalb der SVG-Grenzen liegt. Ich habe versucht, es basierend darauf zu implementierenBeispiel, aber ich kann es nicht zum Laufen bringen. Ich habe geschaffendiese Geige mit nur dem Rechteck, das zoombar und ziehbar ist. Auch hier versuche ich, es so zu machen, dass Sie das Rechteck nicht aus dem SVG-Feld ziehen können. Ich setze den Rahmen auf. Ich weiß, dass ich die Verschiebungsfunktion aktualisieren muss. Der folgende Code stammt aus dem ersten Link-Beispiel, scheint aber nicht gut zu funktionieren, sodass ich einen Teil davon auskommentiert habe.

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

Bearbeiten: Also zusätzlich muss ich in der Lage sein, das Rechteck zu ziehen, wenn Sie ganz hineingezoomt sind und es größer als das SVG ist. In der Abbildung unten ist das blaue Rechteck das SVG, und Grün ist das Rechteck, und Sie werden ganz hineingezoomt, sodass das grüne Rechteck viel mehr als das SVG aufnimmt. Dies ist ähnlich der Karte in derBeispiel für einen eingeschränkten Zoom. Sie können in die Bundesstaaten zoomen und im ganzen Land ziehen, um zu Bundesstaaten außerhalb der aktuellen SVG-Größe zu navigieren