SVG viewBox とpreserveAspectRatio はどのようにして d3.js ビジュアライゼーションをウィンドウのサイズ変更に応答させることができるのでしょうか?

幅と高さの動的な調整による d3.js ビジュアリゼーションの応答性の強化

応答性の高いビジュアライゼーションは、さまざまな画面サイズに適応するために重要です。これを実現するには、最初に固定サイズのグラフィック (960 x 500 ピクセル) を作成し、ウィンドウのサイズが変更されたときに動的に調整するヒストグラム視覚化スクリプトをどのように変更するか疑問に思うかもしれません。

ソリューションの中心

これまで、この問題に対処するには、サイズ変更イベントでチャートを再描画する必要がありました。ただし、よりエレガントで効率的なアプローチが登場しました。

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

この変更により、再描画を必要とせずにビジュアライゼーションをシームレスに拡大縮小し、縦横比を維持できるようになります。

縦横比の維持古いブラウザ

最新のブラウザのほとんどは viewBox に基づいてアスペクト比を自動的に決定できますが、古いブラウザでは追加の処理が必要な場合があります。このような場合、ウィンドウのサイズが変更されたときにグラフ要素のサイズを動的に変更して、内容が適切に拡大縮小されるようにすることができます。

<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>

このコード スニペットは、元のアスペクト比を維持しながらグラフの幅と高さを調整します。

変革を目撃してください

実際の応答性の高いビジュアライゼーションを体験するには、ウィンドウまたはこのライブ デモの右下ペインのサイズを変更します: https://bl.ocks.org/mbostock/3043334。

以上がSVG viewBox とpreserveAspectRatio はどのようにして d3.js ビジュアライゼーションをウィンドウのサイズ変更に応答させることができるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。