-1

この折れ線グラフをピクセルではなくパーセンテージでサイズ変更できるようにしようとしています。

誰でも解決策を見つけるのを手伝ってもらえますか?

ここにリンクがあります

4

2 に答える 2

1

D3 セレクターは、ノード参照と文字列セレクターを受け入れることができます。これを利用してください。SVG をコンテナーに入れます。コンテナーは、その寸法 (相対または絶対) の任意の単位タイプを持つことができ、コンテナーによって SVG サイズを設定します。

var el = document.getElementById('canvas');
var svg = d3.select(el).append('svg');
setSize(svg, el);

function setSize(child, parent) {
    child && parent && 
    child.attr('width', parent.clientWidth)
         .attr('height', parent.clientHeight);
}

イベントをウィンドウにアタッチし、resizeコールバックで SVG サイズを更新します。

var that = this;
window.addEventListener('resize', function (e) {
    that.setSize(el);
});

もちろん、これは単純化しすぎており、まだテストされていませんが、これで始められるはずです。

Mozilla Developer Networkのイベントに関するドキュメントをresize参照してください。

于 2013-08-14T09:27:28.387 に答える
0

D3 を使用する場合、x 軸または y 軸をスケーリングする場合は、データ範囲に合わせて調整できれば、実行可能で簡単です。軸のスケールをリセットするだけです。

これを開発の例として取り上げます: http://mpf.vis.ywng.cloudbees.net/

（凡例をクリックして曲線を追加します。新しい曲線が入ったら... y軸スケールが調整されます...あなたの問題については、コードを少し変更するだけで解決できると思います）

于 2013-08-14T14:54:03.273 に答える