21

SVGを使用するd3jsを使用してチャートを作成しています。www.uscfstats.com/deltas で参照してください (入力値として 12842311 を使用します。現在、非常にハッキングされています)。

Chrome、Safari、および Firefox 10 では、これは期待どおりに完全なグラフをレンダリングし、白いボックス全体を占めていました。ただし、Firefox の以降のバージョン (具体的には 15) では、SVG の上位 200 ピクセル程度がレンダリングされますが、残りは切り取られます。

Firebug でページを開くと、HTML 要素を強調表示できますが、それらがすべてそこにあるように見えます。大きな白いボックスがチャートの下部 75% を覆っているように見えます (そのような HTML はありません)。ただし要素）。ドットにクリックイベントがあり、レンダリングされたものはクリックできますが、そうでないものは見つけることができますが、クリックしても何もしません。

書くことで問題を解決しました

var svg = d3.select("#scatterplot").append("svg").attr("width", "100%").attr("height", "100%");

なぜこれが機能し、何が起こったのですか?

4

7 に答える 7

18

何が起こったかというと、svg のサイジングがどのように機能するかの仕様が明確になり、さまざまなケースでより適切に機能するようになり、更新された仕様を追跡するために Firefox が更新されました。特に、<svg>あらゆる種類の状況で失敗する自動魔法のものを試みる代わりに、他の CSS 置換要素と同じ方法でサイズ変更するようになりました。

特に、以前は、幅と高さの属性がないことは、両方を 100% に設定するのと同じように扱われていました。問題。したがって、幅と高さを設定すると、それらはプレゼンテーションのヒントのように扱われ ( の幅と高さの属性と同じように<img>)、設定しない場合は、デフォルトの 300x150 固有のサイズ設定が取得され、スタイル ルールで次のようにオーバーライドできます。望ましい。

于 2012-10-11T04:32:14.573 に答える
2

pxFirefoxでは、使用しているユニットを定義する必要があります:%など

したがって、以下は私にとってはうまくいきませんでした：

var width = 800,
    height = 600;

var el = d3.select('#d3_element')
    .style('width', width)
    .style('height', height);

しかし、以下はうまくいきました：

var el = d3.select('#d3_element')
    .style('width', width + 'px')
    .style('height', height + 'px');
于 2014-12-17T15:39:32.840 に答える
0

また、 innerWidthやouterHeightなどの変数名を使用していないことを再確認してください。それが私の場合の問題でした。IE9 と Chrome では正常にレンダリングされますが、Firefox (33.0) ではおかしくなります - おそらくバグです。

于 2015-01-23T18:54:24.287 に答える
0

flex コンテナーに svg を挿入し、プロパティ flex: auto; を追加します。svgに。わたしにはできる

于 2019-05-30T00:25:20.530 に答える