ユーザーが設定したウィンドウのサイズに応じてsvg要素（コンテンツ全体も）のサイズを変更できるようにするjsコードを知っている人はいますか。私のユーザーは、アクティブなデスクトップ上の小さなカスタマイズされたビューでd3グラフィックスを表示したいと思うでしょう。同時に、他の人はアクティブなデスクトップでフルスクリーンで実行します。これは、ユーザーの好みに応じて、グラフのサイズを自分で変更する必要があることを意味します。
7035 次
2 に答える
10
数日前に、この望ましい動作のデモをまとめました。ここでチェックしてください - http://bl.ocks.org/4444770
基本的に、ウィンドウのサイズをリッスンし、すべての SVG 要素をラップする g 要素に比例変換を適用し、親 SVG のサイズを調整します。ページの読み込み時とウィンドウのサイズ変更時にこのコードを呼び出します。ここで、「コンテナー」は SVG を保持する div です。
d3.select("g").attr("transform", "scale(" + $("#container").width()/900 + ")");
$("svg").height($("#container").width()*0.618);
これは、SVG が div 内に配置されている場合に適した方法です。
もう 1 つの方法は、Mike Bostock がhttp://bl.ocks.org/harlantwood/raw/6900108/で示しているように、SVG ビューボックスを使用することです。この方法は、ボディに SVG を追加する場合に最適です。SVG を div 内に配置するときにこの方法を使用する方法があると確信していますが、解決策を見つけることができなかったため、上記を作成しました回避します。
于 2013-01-07T19:56:19.863 に答える
2
ページのロード時またはサイズ変更時に svg.attr("width").attr("height") を調整できますが、d3 要素を新しいサイズで変更するには、コードに追加の動作が必要です。
また、svg オブジェクトの .viewBox 属性を調べることもできます。これにより、svg 要素が動的にスケーリングされますが、さまざまなブラウザー間での動作が不安定であることがわかりました。
于 2013-01-05T21:47:43.340 に答える