Internet ExplorerのD3 SVGの問題

Question

D3とSVGを使用してスクロールする凡例を表示する際に問題があります。私の伝説は、データに基づいて異なり、任意の範囲にすることができます。 Chromeで

https://jsfiddle.net/bikrantsharma/eqnnd84v/

：1から150

に、ここで簡単な作業フィドルだすべてが、それはうまくスクロール細かい動作しますが、IEに小さい高さと、すべての伝説のコンテナディスプレイは、実際の小さな表示していますスクロール・コズがなければ、最大高さは決して打たれません。

私はIEがSVGの高さを正しく決定しないので、相対的な配置を使用して初期の高さを指定する必要があります。

IはSVGClassはSVG要素に印加される

.legend-main-div{ 
height:0; 
padding:40%; 
position:relative; 
} 

.SVGClass{ 
    top:0; 
    bottom:0; 
    position:absolute; 
} 

として相対及び絶対配置を適用しようとしています。これは凡例を正しく表示しますが、スクロール機能が失われるようになりました。

クロムとIEの両方でスクロールする伝説を得る方法はありますか？

何かの理由で、フィディルドのすべてのアイテムがスクロールウィンドウに表示されず、実際のコードで正常に動作しています。他の質問への提案を

Answer 1

まあおかげGerado ..クロームの

- 「100％」までの高さを設定するには、応答のdivの高さに設定されたビューポートの高さに影響を与えていませんでした。

IEでは - 高さを100％に設定すると、ビューポート内に設定されていたものではなく、ビューポートが最初の高さになりました。

SVGの高さを100％ではなくresponsiveDivの高さに設定すると、実際に問題が解決されました。フィドルを更新しました。

誰かがそれが「100％」に

をlegendSVGの高さを変更するIEでどのように見えるかを確認したい場合、私は、任意のコメント