D3.jsでレスポンシブ・レイアウトを実現するには


D3.jsでレスポンシブ・レイアウトを

最近はウェブの閲覧環境が多様化し、PCとモバイルでは画面解像度が全くことなります。
D3.jsでなにかを作る際、ワンソースで多様な閲覧環境に対応するための、レスポンシブ・レイアウト対応方法の一つを以下に紹介します。

D3.jsはSVGを使っている

そこで、SVGが標準でサポートしている属性を使います。
個別の要素の大きさをすべて調整するのは大変なので、一番親要素のSVGの大きさを変更することで対応することにします。

viewBoxとpreserveAspectRatioの設定

viewBoxとpreserveAspectRatioという属性の設定をします。
これはSVGが拡大表示されたときの振る舞いを決定するものです。

.attr("viewBox", "0 0 960 400")
.attr("preserveAspectRatio", "xMidYMid")

viewBoxの値は、”0 0 width height” とします(widthとheightは整数)。
preserveAspectRatioの値は xMidYMid とします。これでviewBoxのX/Y中央値を、ビューポートのX/Yの中央値に揃えることになります。

ウインドウサイズが変更した際に、SVGの大きさも変更する

var chart = $("#chart"),
    container = chart.parent();</p>

<p>$(window).on(&quot;resize&quot;, function() {</p>

<p>var targetWidth = container.width();
chart.attr(&quot;width&quot;, targetWidth);
chart.attr(&quot;height&quot;, Math.round(targetWidth / aspect));</p>

<p>}).trigger(&quot;resize&quot;);

svgの親要素の横幅を取得し、SVGをその大きさに合わせます。
縦幅は独自には取得せず、横幅との比率で処理をします。

サンプルコード

参考リンク


コメント