D3 Examples - SVG gradient angle in different view boxes

xxxxxxxxxx
 
<!DOCTYPE html>
​
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="triangleEquations.js"></script>
​
    <style>
        body {
            margin: 0;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: DarkSlateBlue;
        }
​
        g.tick > line {
            stroke: lightgrey;
        }
​
        g.tick > text {
            fill: lightgrey;
        }
​
    </style>
</head>
​
<body>
    <script>
​
                let width = 100;
        let height = 300;
                
        let gradientAngleDegrees = 30;
        let gradientAngle = 30 * (Math.PI/180);
        
        const gradientColours = [
            { "offset": "0%", "stopColor": "yellow" },
          { "offset": "19%", "stopColor": "yellow" },
            { "offset": "20%","stopColor": "MediumVioletRed" },
          { "offset": "69%","stopColor": "MediumVioletRed" },
            { "offset": "70%", "stopColor": "Indigo" },
            { "offset": "100%", "stopColor": "Indigo" }
        ];
​
        const margin = { "top": 50, "right": 50, "bottom": 50, "left": 50 };
        
        let svg = d3.select("body")
            .append("svg")
            .attr("width", 500 + margin.left + margin.right)
            .attr("height", 500 + margin.top + margin.bottom);
      
        let defs = svg.append("defs");
      
        let offset = 0;
      
                let series = [1,2,3];
        
        series.forEach(function(d){
          
         let g = svg.append("g")
            .attr("transform", "translate(" + (d * 120) +"," + (d * offset + 10) + ")");
          
          let rectHeight = (height * d/3);
          
          let bottom = (height * d/3) + (height * (3 - d)/3);
         
          let x1 = width;
          let y1 = bottom;
          let x2 = -(oppositeSin(gradientAngle, height));
          let y2 = height - (adjacentCos(gradientAngle, height));
                
            let gradient = defs.append("linearGradient")
                .attr("id", "gradient" + d)
                .attr("x1", 0)
                .attr("y1", 0)
                .attr("x2", 1)
                .attr("y2", 0)
                    .attr("gradientUnits", "userSpaceOnUse")
                    .attr("gradientTransform","rotate(45,0,300)")
                    
            gradient.selectAll("stop")
                .data(gradientColours)
                .enter()
                .append("stop")
                .attr("offset", function (d) { return d.offset; })
                .attr("stop-color", function (d) { return d.stopColor; });
​
            let rect = g.append("rect")
                .attr("x", 0)
                .attr("y", height - rectHeight)
                    .attr("width", width)
                    .attr("height", rectHeight)
                .style("fill", "url(#gradient" + d + ")")
                    //.attr("transform", "skewY(-45)")
​
          
​
​
​
                })
        
        
​
        
    </script>
</body>
    