1

ズーム可能なツリーマップの例のレスポンシブバージョンを作成しようとしています。ウィンドウに合わせてツリーマップのサイズを変更するには、何を追加する必要がありますか?

treemap.size()の update メソッドで変更しようとして$(window).resize()も、何も起こらないようです。

svg を に設定するstyle="width: 100%; height: 100%"と、svg のサイズが変更されますが、ツリーマップのレイアウトは変更されません。また、この回答に従って使用してみviewboxましたが、ツリーマップは最初は正しいように見えますが、レイアウトが正しいサイズを認識していないため、ズーム機能が正しく機能しなくなりました。preserveAspectRatio treemap

4

1 に答える 1

1

これを処理する 1 つの方法は、Lars Kotthoffがツリーマップを再描画できると言ったことです。

まず、幅と高さのパラメーターをグラフ コンテナーの幅と高さとして指定してから、コンテナーの幅と高さをパーセンテージで指定する必要があります。そして、ズーム可能なマップ描画スクリプトを関数内にラップします (これを zoomabletreemap() と呼びましょう)。

次に、JavaScript を使用してウィンドウ サイズ変更イベントの zoomabletreemap() 関数を呼び出す必要があります。JavaScript を呼び出す前に、古いグラフも削除する必要があります。

$(window).resize(function () {
            var div = document.getElementById("my-svg-div"); //id of the div we are appending to the chart container to contain the svg
            div.parentNode.removeChild(div);
            ZoomableTreeMap();
            });

上記で説明したのと同じ実際の例を次に示します

于 2014-07-07T07:50:23.950 に答える