Internet Explorer中的D3 SVG问题 [英] D3 SVG issue in Internet Explorer

问题描述

在使用D3和SVG显示滚动图例时遇到一些麻烦.我的图例因数据而异，可以是任何范围.从1到150

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/

在Chrome上:一切正常，它可以很好地滚动，但是在IE中，容器显示的高度较小，并且所有图例都显示的很小，并且没有滚动坐标，因此最大高度永远不会被击中.

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.

我在某处读到IE无法正确确定SVG高度，因此我们必须使用相对定位并提供初始高度.

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;
}

其中SVGClass应用于svg元素.这样可以正确显示图例，但现在我松开了滚动功能.

where SVGClass is applied to the svg element. This displays the legends correctly but now i loose the scrolling functionality.

有没有办法让滚动图例在chrome和IE中都能正常工作?

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.

推荐答案

非常感谢Gerado对另一个问题的建议.

Well thanks Gerado for the suggestion on the other question..

在Chrome上-将高度设置为"100％"不会影响视口高度，视口高度已设置为响应div高度.

on Chrome - Setting height to '100%' was not affecting the viewport height which was set to the responsive div height.

在IE上-将高度设置为100％会导致视口获得初始高度，而不是在视口内部设置的初始高度.

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.

将SVG的高度设置为responseDiv高度而不是100％实际上解决了此问题.更新了小提琴.

Setting the height of SVG to responsiveDiv height instead of 100% actually resolved the issue. Updated the fiddle.

如果有人想看看它在IE中的外观，请将legendSVG高度更改为'100％'

if someone wants to see how it looks in IE change the legendSVG height to '100%'

请让我知道任何评论

这篇关于Internet Explorer中的D3 SVG问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！