Internet Explorer中的D3 SVG问题

Question

我在使用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元素。这可以正确显示传说，但现在我松开了滚动功能。

有没有一种方法可以使滚动传说在Chrome和IE？

中使用？

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

Answer 1

很好，请感谢Gerado对另一个问题的建议。

在Chrome上 - 将高度设置为" 100％"并不影响设置为响应DIV高度的视口高。

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

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

如果某人想查看它的外观IE，则将传奇人数的高度更改为'100％'

请让我知道任何评论