Linear Gradient Rotation

<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3.v4.min.js"></script>

var colorRange = ['#EFA08D', '#F0BC89', '#F0DB84', '#E5F17F', '#C0F17A', '#70F272', '#6BF297', '#61F3E9']
        
        var color = d3.scaleLinear().range(colorRange).domain([1, 2, 3, 4, 5, 6, 7, 8]);

var svg = d3.select('body')
            .append('svg')
            .attr("width", width + (margin * 2))
            .attr("height", height + (margin * 2))
            .append("g")
            .attr("transform", "translate(" + (margin) + "," + (margin) + ")");

var linearGradient = svg.append("defs")
            .append("linearGradient")
            .attr("id", "linear-gradient");

linearGradient.append("stop")
            .attr("offset", "0%")
            .attr("stop-color", color(1));

linearGradient.append("stop")
            .attr("offset", "14.28%")
            .attr("stop-color", color(2));

linearGradient.append("stop")
            .attr("offset", "28.57%")
            .attr("stop-color", color(3));

linearGradient.append("stop")
            .attr("offset", "42.85%")
            .attr("stop-color", color(4));

linearGradient.append("stop")
            .attr("offset", "57.14%")
            .attr("stop-color", color(5));

linearGradient.append("stop")
            .attr("offset", "71.42%")
            .attr("stop-color", color(6));

linearGradient.append("stop")
            .attr("offset", "85.71%")
            .attr("stop-color", color(7));

linearGradient.append("stop")
            .attr("offset", "100%")
            .attr("stop-color", color(8));

svg.append("rect")
            .attr("x", 0)
            .attr("y", 0)
            .attr("width", width)
            .attr("height", height)
            .style("stroke", "black")
            .style("stroke-width", 2)
            .style("fill", "url(#linear-gradient)");

d3.select("#range1").on("input", function () {

svg.selectAll('#linear-gradient')
                .transition()
                .duration(1000)
                .ease(d3.easeLinear)
                .attr("gradientTransform", "rotate(" + d3.select("#range1").property("value")+")");

});

</script>

</body>

https://d3js.org/d3.v4.min.js