BinaryDevelop
  1. ホーム
  2. javascript

[解決済み】d3.jsでウィンドウサイズ変更時にsvgをリサイズする。

2022-04-15 21:52:26

質問

d3.jsで散布図を描いています。この質問の助けを借りて:

画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する

私はこの答えを使っています。 

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

それで、私のプロットをユーザーのウィンドウにこのようにフィットさせることができます。 

var svg = d3.select("body").append("svg")
        .attr("width", x)
        .attr("height", y)
        .append("g");

あとは、ユーザーがウィンドウをリサイズしたときに、プロットのサイズを変更できるようにしてほしいです。

PS : 私のコードでは、jQueryは使用していません。

解決方法は？

レスポンシブSVG」を探せば、SVGをレスポンシブにするのはとても簡単で、もうサイズについて心配する必要はありません。

以下はその方法です。 

d3.select("div#chartId")
   .append("div")
   // Container class to make it responsive.
   .classed("svg-container", true) 
   .append("svg")
   // Responsive SVG needs these 2 attributes and no width and height attr.
   .attr("preserveAspectRatio", "xMinYMin meet")
   .attr("viewBox", "0 0 600 400")
   // Class to make it responsive.
   .classed("svg-content-responsive", true)
   // Fill with a rectangle for visualization.
   .append("rect")
   .classed("rect", true)
   .attr("width", 600)
   .attr("height", 400);

.svg-container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* aspect ratio */
  vertical-align: top;
  overflow: hidden;
}
.svg-content-responsive {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 0;
}

svg .rect {
  fill: gold;
  stroke: steelblue;
  stroke-width: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<div id="chartId"></div>

注 SVG画像に含まれるすべてのものは、ウィンドウの幅に合わせて拡大縮小されます。これには、ストロークの幅やフォントサイズ（CSSで設定されたものも含む）も含まれます。もし、これが望ましくない場合は、以下にもっと詳細な解決策を示します。

詳細はこちら/チュートリアル

http://thenewcode.com/744/Make-SVG-Responsive

http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します