199

d3.js で散布図を描いています。この質問の助けを借りて:
画面、現在の Web ページ、およびブラウザー ウィンドウのサイズを取得します。

私はこの答えを使用しています：

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 を使用していません。

4

8 に答える 8

45

window.onresizeを使用します。

function updateWindow(){
    x = w.innerWidth || e.clientWidth || g.clientWidth;
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

    svg.attr("width", x).attr("height", y);
}
d3.select(window).on('resize.updatesvg', updateWindow);

http://jsfiddle.net/Zb85u/1/

于 2013-04-28T17:30:08.297 に答える
8

強制レイアウトでは、'height' および 'width' 属性を設定するだけでは、プロットを svg コンテナーに再配置/移動することはできません。ただし、Force Layouts で機能する非常に簡単な答えがここにあります。要約すれば：

好きな同じ（任意の）イベントを使用してください。

window.on('resize', resize);

次に、svg & force 変数があると仮定します。

var svg = /* D3 Code */;
var force = /* D3 Code */;    

function resize(e){
    // get width/height with container selector (body also works)
    // or use other method of calculating desired values
    var width = $('#myselector').width(); 
    var height = $('#myselector').height(); 

    // set attrs and 'resume' force 
    svg.attr('width', width);
    svg.attr('height', height);
    force.size([width, height]).resume();
}

このように、グラフを完全に再レンダリングするのではなく、属性を設定し、必要に応じて d3 が再計算します。これは、少なくとも重心を使用する場合に機能します。それがこのソリューションの前提条件であるかどうかはわかりません。誰でも確認または拒否できますか?

乾杯、g

于 2014-05-12T21:31:41.210 に答える