2

シンプルなd3 Google アナリティクス スタイルの面グラフ デモを試してみました。なんとかコンテナの幅いっぱいまで伸ばしたいと思います。ただし、もちろん、小さな円も形が崩れています。それらの位置はレスポンシブでありたいのですが、寸法はそうではありません(したがって、円形のままです)。

フィドル リンク: http://jsfiddle.net/46PfK/2/

SVGPanUnscale.jsスクリプトを使用しようとしています。unscaleEach('.dot');and で呼び出してみまし[].forEach.call($('.dot'),unscale);たが、どちらも何もしていないようです。

この例は、鉱山と同様の方法でレスポンシブであり、スクリプトを使用して軸ラベルを「スケール解除」します: http://meloncholy.com/static/demos/responsive-svg-graph-1/

この例では、円要素も使用しています: http://phrogz.net/svg/scale-independent-elements.svg

私は css 属性を含むソリューションを見ました:

circle {
    vector-effect: non-scaling-stroke;
}

楕円上に円形のストロークを作成しました-奇妙です。

ブラウザ間で動作する場合は、CSS ソリューションが JS ソリューションよりも望ましいでしょう。

助言がありますか？

4

2 に答える 2

0

正しい方向に向けてくれた@leMoiselaに感謝します。サイズ変更時にグラフを再描画するためにJSを使用して問題をうまく修正しました。

http://jsfiddle.net/46PfK/4/

window.onresize = function(e){
    draw_graph();
};
于 2013-11-14T13:11:12.980 に答える