SVG renders but gets cut off in Firefox only - why?

What happened is that the spec for how svg sizing should work got clarified so it works better in various cases, and Firefox was updated to track the updated spec. In particular, <svg> now sizes the same way as other CSS replaced elements, instead of trying for auto-magic things that fail in all sorts of situations.

And in particular, it used to be that lack of width and height attributes was treated as sort of equivalent to setting them both to 100%, except it didn't really play nice with actually setting a width or height in CSS and had some other problems. So now, the behavior is that if you set width and height those are treated like presentational hints (just like width and height attributes for <img>) and if you don't you get the default 300x150 intrinsic sizing which you can then override with style rules as desired.

I was also facing same issue

.attr("width", window.innerWidth).attr("height",window.innerHeight)

worked for me.

In firefox you need to define what units you're using: px, % etc

thus the following didn't work for me:

var width = 800,
    height = 600;

var el = d3.select('#d3_element')
    .style('width', width)
    .style('height', height);

but the following did work:

var el = d3.select('#d3_element')
    .style('width', width + 'px')
    .style('height', height + 'px');