Internet Explorer中的D3 SVG問題

我在使用D3和SVG顯示滾動圖例時遇到了一些麻煩。我的傳說根據數據而有所不同，可以是任何範圍。從1到150Internet Explorer中的D3 SVG問題

這裏有一個簡單的工作小提琴：

在Chrome：一切正常，它滾動很好，但在IE高度較小的容器中顯示，所有的傳說都顯示實小並沒有滾動因爲最大高度從未被擊中。

我已經讀過IE沒有正確確定SVG高度的地方，所以我們必須使用相對定位並提供初始高度。

我試圖施加相對和絕對定位爲

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

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

其中SVGClass被施加到SVG元素。這會正確顯示圖例，但現在我失去了滾動功能。

有沒有辦法讓滾動的傳說在鉻和IE工作？

出於某種原因，在小提琴中所有的項目都沒有顯示在我的滾動窗口中，但在我的實際代碼中工作正常。

沒有做任何事情在IE瀏覽器的工作？除了開玩笑，我得到了完全相同的結果（Chrome和IE 11）。 –

它吸引各方面大的時間.. – fireholster

奇怪！你知道它爲什麼只顯示小提琴中的幾個複選框，而不是全部？ – fireholster

以及感謝傑拉多對其他問題的建議..

在Chrome - 設置高度，以「100％」爲不影響其被設置爲響應DIV高度視口的高度。

在IE上 - 將高度設置爲100％會導致視口獲取初始高度，而不是在視口內設置的高度。

將SVG的高度設置爲responsiveDiv高度而不是100％實際上解決了問題。更新小提琴。

如果有人想看看它的外觀在IE改變legendSVG高度爲「100％」

請讓我知道任何評論

2017-04-26 06:40:16 fireholster

回答