D3 SVG-Problem in Internet Explorer

Question

Ich habe Probleme mit der Anzeige von Bildlegenden mit D3 und SVG. Meine Legenden variieren basierend auf Daten und können von beliebiger Reichweite sein. 1-150

hier ist eine einfache Arbeits Geige:

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

On Chrome: alles, was es rollt gut, aber in IE die Behälter Displays von einer geringeren Höhe und alle Legenden angezeigten echte kleine funktioniert gut und ohne scroll coz wird die maximale höhe nie erreicht.

Ich habe irgendwo gelesen, dass IE die SVG-Höhe nicht korrekt bestimmt, so müssen wir relative Positionierung verwenden und Anfangshöhe bereitstellen.

habe ich die Anwendung versuche, relative und absolute Positionierung als

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

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

wo SVGClass zum SVG Elemente angelegt wird. Dies zeigt die Legenden korrekt an, aber jetzt verliere ich die Scrollfunktion.

Gibt es eine Möglichkeit, Scroll-Legenden in Chrome und IE zu arbeiten?

Aus irgendeinem Grund in der Geige werden nicht alle Elemente in meinem Scroll-Fenster angezeigt, aber in meinem tatsächlichen Code funktioniert es gut.

Answer 1

Nun dank Gerado für den Vorschlag auf der anderen Frage ..

auf Chrom - Einstellung Höhe auf ‚100%‘ wurde nicht die Darstellungshöhe zu beeinflussen, die auf die ansprechende div Höhe eingestellt wurden.

Während IE - Einstellung der Höhe auf 100% verursachte, dass das Ansichtsfenster die Anfangshöhe anstelle von dem, was innerhalb des Ansichtsanschlusses festgelegt wurde.

Wenn Sie die Höhe von SVG auf responsiveDiv height anstelle von 100% festlegen, wurde das Problem behoben. Die Geige wurde aktualisiert.

wenn jemand will, um zu sehen, wie es in IE sieht zu ‚100%‘ die legendSVG Höhe ändern

Sie mich bitte, jeder Kommentar