问题
I am having some trouble in displaying a scrolling legends using D3 and SVG. My legends vary based on data and can be of any range. from 1 to 150
here's a simple working fiddle:
https://jsfiddle.net/bikrantsharma/eqnnd84v/
On Chrome: everything works fine it scrolls well But in IE the container displays of a smaller height and all the legends are displaying real small and with no scroll coz the max-height is never hit.
I have read somewhere that IE does not determine the SVG height correctly so we have to use relative positioning and provide initial height.
I have tried applying relative and absolute positioning as
.legend-main-div{
height:0;
padding:40%;
position:relative;
}
.SVGClass{
top:0;
bottom:0;
position:absolute;
}
where SVGClass is applied to the svg element. This displays the legends correctly but now i loose the scrolling functionality.
Is there a way to get scrolling legends working in both chrome and IE?
For some reason in the fiddle all the items are not getting displayed in my scrolling window but in my actual code it is working fine.
回答1:
Well thanks Gerado for the suggestion on the other question..
on Chrome - Setting height to '100%' was not affecting the viewport height which was set to the responsive div height.
Whereas on IE - Setting the height to 100% was causing the viewport to get the initial height instead of what was set inside the view port.
Setting the height of SVG to responsiveDiv height instead of 100% actually resolved the issue. Updated the fiddle.
if someone wants to see how it looks in IE change the legendSVG height to '100%'
Please let me know of any comment
来源：https://stackoverflow.com/questions/43625690/d3-svg-issue-in-internet-explorer