Resizing svg without cropping?

Question

I'm working on a d3 timeline in an Electron desktop app and I am trying to handle the resizing of the window to fullscreen. I'm using the suggestion provided this answer and while it is roughly working, the lower 25% of my d3 svg is getting cropped when the app is fullscreen. I've been trying different parameters for preserveAspectRatio (documentation) but I'm not getting an acceptable result.

What I would like is for the full "y" dimension of the svg to be scaled without cropping and the "x" dimension to be stretched as needed. Alternately, the "y" dimension could be squashed as needed in order to show the full content.

At this point I am just poking the code and not learning anything. Am I doing this wrong?

---

1024 x 768 window size

---

1400 x 900 screen size: the lower 25% of the svg content is cropped out.

---

Code from this answer

    d3.select("div#container")
        .classed("svg-container", true) //container class to make it responsive
        .append("svg")
        //responsive SVG needs these 2 attributes and no width and height attr
        // .attr("preserveAspectRatio", "none")
        // .attr("preserveAspectRatio", "xMidYMax slice")
        // .attr("preserveAspectRatio", "xMinYMid slice")
        .attr("preserveAspectRatio", "xMaxYMin meet")
        .attr("viewBox", function(){
            // RETURNS: "0, 0 984, 728"
            return 0 + " " + 0 +  " " + svgWidth + " " +  svgHeight;
        })
        //class to make it responsive
        .classed("svg-content-responsive", true);

---

css

 .svg-container {
     display: inline-block;
     position: relative;
     width: 100%;
     padding-bottom: 100%;

     vertical-align: top;
     overflow: hidden;
 }

 .svg-content-responsive {
     display: inline-block;
     position: absolute;
     top: 10px;
     left: 0;
 }