Wie können SVG ViewBox und PreserveAspectRatio dafür sorgen, dass d3.js-Visualisierungen auf die Größenänderung von Fenstern reagieren?

Verbesserung der Reaktionsfähigkeit in d3.js-Visualisierungen durch dynamische Breiten- und Höhenanpassungen

Reaktionsfähige Visualisierungen sind entscheidend für die Anpassungsfähigkeit an unterschiedliche Bildschirmgrößen. Um dies zu erreichen, fragt man sich vielleicht, wie man ein Histogramm-Visualisierungsskript ändert, das zunächst eine Grafik mit fester Größe (960 x 500 Pixel) erstellt, um sich dynamisch anzupassen, wenn die Fenstergröße geändert wird.

Das Herzstück der Lösung

In der Vergangenheit musste zur Behebung dieses Problems das Diagramm bei Größenänderungsereignissen neu gezeichnet werden. Es hat sich jedoch ein eleganterer und effizienterer Ansatz herauskristallisiert. Durch Ändern der Attribute „viewBox“ und „preserveAspectRatio“ des

<code class="html"><svg id="chart" viewBox="0 0 960 500"
  preserveAspectRatio="xMidYMid meet">
</svg></code>

Diese Änderung ermöglicht es der Visualisierung, nahtlos zu skalieren und ihr Seitenverhältnis beizubehalten, ohne dass ein Neuzeichnen erforderlich ist.

Beibehalten der Proportionen für Ältere Browser

Während die meisten modernen Browser das Seitenverhältnis automatisch anhand der ViewBox ermitteln können, erfordern ältere Browser möglicherweise zusätzliche Handhabung. In solchen Fällen können Sie die Größe des Diagrammelements dynamisch ändern, wenn sich die Fenstergröße ändert, um sicherzustellen, dass der Inhalt angemessen skaliert wird.

<code class="javascript">var aspect = width / height,
    chart = d3.select('#chart');
d3.select(window)
  .on("resize", function() {
    var targetWidth = chart.node().getBoundingClientRect().width;
    chart.attr("width", targetWidth);
    chart.attr("height", targetWidth / aspect);
  });</code>

Dieses Code-Snippet passt die Breite und Höhe des Diagramms an und behält dabei das ursprüngliche Seitenverhältnis bei.

Erleben Sie die Transformation

Um die reaktionsfähige Visualisierung in Aktion zu erleben, ändern Sie die Größe des Fensters oder des unteren rechten Bereichs dieser Live-Demo: https://bl.ocks.org/mbostock/3043334.

Das obige ist der detaillierte Inhalt vonWie können SVG ViewBox und PreserveAspectRatio dafür sorgen, dass d3.js-Visualisierungen auf die Größenänderung von Fenstern reagieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!