Question

我正在用d3.js创建一个可视化：

http://bl.ocks.org/EE2dev/raw/cd904f10097b9921f1cc/

在该代码中，我创建了一个SVG元素并使用以下行设置大小：

var chart = d3.select("body")
  .append("div").attr("class", "chart")
  .append("svg")
  .attr("width", outerWidth) // outerWidth = 960
  .attr("height", outerHeight) // outerHeight = 500
  .append("g")
  .attr("class", "margin")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

在Chrome中测试代码，一切正常，SVG具有所需的大小（960,500）。但是，当我在Firefox中打开此站点时，创建的SVG元素具有不同的大小，显然取决于实际的浏览器窗口大小，例如，（634,856）在下面的案例中。

enter image description here

如何修复此行为以将SVG设置为Firefox所需的固定大小？

我尝试了几件事，包括包裹div和/或跟随我在别处找到的想法

但是我没有找到解决这个问题的方法：（

非常感谢任何帮助！

Answer 1

outerWidth和outerHeight是浏览器窗口属性。奇怪的是，这些属性可以在Chrome中覆盖，但不能在Firefox中覆盖（FF API）。所以当你设置

outerWidth = 960;

然后在Chrome中将outerWidth更改为960。在Firefox的情况下，它是当前窗口宽度，并且客户端脚本无法更改它。因此，重命名为outerWidth和outerHeight，它应该正常运行。

svgWidth = 960;
svgHeight = 500;

...

.append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight)

如何设置内联SVG元素的确切大小？

1 个答案: