Internet Explorer 中的 D3 SVG 问题答案

【问题标题】：D3 SVG issue in Internet ExplorerInternet Explorer 中的 D3 SVG 问题
【发布时间】：2017-04-26 05:24:17
【问题描述】：

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

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

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

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

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

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

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

其中 SVGClass 应用于 svg 元素。这会正确显示图例，但现在我失去了滚动功能。

有没有办法让滚动图例同时在 chrome 和 IE 中工作？

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

【问题讨论】：

在 IE 上有什么功能吗？开个玩笑，我得到了完全相同的结果（Chrome 和 IE 11）。
它在各个方面确实很糟糕..
奇怪！！你知道为什么它在小提琴中只显示几个复选框而不是全部吗？
我可能遗漏了一些东西..在实际应用程序中，当在保存 svg 的容器上点击 max-height 时，它会在滚动面板中显示其他项目..简而言之我能做些什么显示所有项目并在我的小提琴中滚动？？
这是一个不同的问题，我建议你编辑这个问题，或者更好地发布一个新问题，解释你的问题。

【解决方案1】：

感谢 Gerado 对另一个问题的建议。

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

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

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

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

如有任何意见请告诉我

【讨论】：