CSS和D3 -在FIREFOX中制作响应svg

我使用D3.js。我已经成功地让它在元素上附加SVG元素，并开始在主SVG上进行SVG绘图。

我希望SVG元素能够响应，所以我决定将属性width和height都设置为100%。

然后创建一个div:

<div id='divForCharts' class='divCharts'>
</div>

然后通过CSS:

将div设置为RESPONSIVE SQUARE

.divCharts{
  width: 50%;
  height: 0;
  padding-bottom: 50%;

  background-color: red;
  margin: 0 auto;
}

与上面的css一样，我将背景色设置为红色，以确保我可以看到div实际上是一个正方形。在代码中，我确实在SAFARI和FIREFOX中都看到了一个红色方块。

问题可以在我点击按钮后看到，该按钮通过d3代码运行，将SVG元素附加到上面的div并添加其他SVG元素。

在SAFARI上，一切都像我预期的那样工作。可以看到SVG元素和父SVG元素的其他SVG子元素。

在FIREFOX上，什么也没有显示。

然后使用FIREBUG检查div并查看d3是否实际上添加了svg。经过检查，可以确认所有svg都已添加到DOM中，并且它们实际上与SAFARI上的svg相同。不同之处在于，在FIREFOX上，什么都不会出现。然后，我查看了FIREFOX上SVG元素的属性。宽度和高度都是100%，正如我所设置的。
然后，我使用这个方法，而不是设置百分比，我直接将高度和宽度更改为100，然后SVG最终出现。

简而言之，相同的代码可以在SAFARI中工作，但不能在FIREFOX中工作....

是什么阻止了它的出现?我该如何解决这个问题?

function resize() {
   /* Find the new window dimensions */
   var width = parseInt(d3.select("#graph").style("width")) - margin*2,
   height = parseInt(d3.select("#graph").style("height")) - margin*2;
}
d3.select(window).on('resize', resize);