D3.js ビジュアライゼーションをレスポンシブにするにはどうすればよいですか?

レスポンシブ レイアウトで D3.js ビジュアライゼーションを適応型にする

D3.js ビジュアライゼーションが固定サイズで固定されていませんか?動的で応答性の高いものにする方法を見てみましょう。

960px x 500px の静的な SVG グラフィックを作成するこのヒストグラム スクリプトについて考えてみましょう。応答性を高めるには、幅と高さに動的な調整を導入する必要があります。

一般的なアプローチには、ウィンドウのサイズ変更時にグラフを再描画することが含まれます。ブラウザーの組み込みのサイズ変更イベント リスナーを使用して、ビューポート内の変更をキャプチャできます。

<code class="javascript">d3.select(window).on("resize", function() {
  // Update the width and height based on the current viewport
  width = window.innerWidth;
  height = window.innerHeight;
  
  // Redraw the visualization with the new dimensions
});</code>

ただし、再描画の必要性を排除する代替ソリューションがあります。それは、SVG 要素の viewBox 属性とpreserveAspectRatio 属性を操作することです。 .

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

このメソッドを使用すると、SVG コンテンツを利用可能なスペースに合わせて自動的に拡大縮小でき、最新のブラウザーのほとんどは viewBox からアスペクト比を推測できます。必要に応じて、古いブラウザのウィンドウ サイズに基づいて SVG の幅と高さを更新するコードを追加できます。

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

これらの変更により、D3.js ビジュアリゼーションはブラウザの変更にシームレスに適応するようになります。寸法を調整し、応答性の高いユーザー エクスペリエンスを保証します。

以上がD3.js ビジュアライゼーションをレスポンシブにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。