Internet Explorer中的D3 SVG问题

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

这是一个简单的工作小提琴：

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

在Chrome上：一切正常，它滚动得很好但是在IE中，容器显示的高度较小，所有的图例都显示实际的小而且没有滚动因为最大高度永远不会被击中。

我已经读过某个地方IE没有正确确定SVG高度所以我们必须使用相对定位并提供初始高度。

我尝试过应用相对和绝对定位

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

其中SVGClass应用于svg元素。这会正确显示图例，但现在我松开了滚动function。

有没有办法让滚动图例同时在Chrome和IE中运行？

由于某些原因，小提琴中的所有项目都没有显示在我的滚动窗口中，但在我的实际代码中，它工作正常。

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

在Chrome上 – 将高度设置为“100％”不会影响设置为响应div高度的视口高度。

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

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

如果有人想看看它在IE中看起来如何将legendSVG高度更改为’100％’

如有任何评论，请与我们联系