How to draw a linear line by using a given slope

This is what i thought about too earlier, but thats already the case! :)

The scaling is achieved by the x and y variables. Since the range is always the width/height of the sandbox (subtracted by margins).

So that means if i resize the graph it will call the update() method again and calculate the new x/y-scale by using the new width/height-values of the graph:

This is how the scaling works.

But i think the problem has something to do with the rotation of the line:

 // Create a SVG-Element (linear line)
            let sLine = this.g
                .append('g')
                .append('rect')
                .classed('sLine', true)
                .attr('x', x(0))
                .attr('y', y(d3.max(viewModel.dataPoints, function(d) { return <number>d.anzahlKostenstellen; }) + meanAnzahlKostenstellen))
                .attr('width', d3.min([height, width]) * BarChart.Config.weightMultiplier)
                .attr('height', (gHeight - (meanGesamtKosten * 2)))
                .attr('transform', 'rotate(' + (7) + ',' + x(0) + ',' + y((d3.min(viewModel.dataPoints, function(d) { return <number>d.anzahlKostenstellen; }) - meanAnzahlKostenstellen)) + ')')
                .style('fill-opacity', viewModel.settings.generalView.opacity/100); 

You can test it like this:

change the line to 0deg:

 .attr('transform', 'rotate(' + (0) + ',' + x(0) + ',' + y((d3.min(viewModel.dataPoints, function(d) { return <number>d.anzahlKostenstellen; }) - meanAnzahlKostenstellen)) + ')')

Now when you scale the graph, the line stays where it should be. The datapoints arent moving behind the line anymore.

Try it for yourself if you want.

EDIT: I changed from 0 degree to x(d3.min(xAxisValues))*0.2 (multiplied by slope-value):

.attr('transform', 'rotate(' + (x((d3.min(viewModel.dataPoints, function(d) { return <number>d.gesamtKosten; }))+meanGesamtKosten)*0.2) + ',' + x(0) + ',' + y((d3.min(viewModel.dataPoints, function(d) { return <number>d.anzahlKostenstellen; }) - meanAnzahlKostenstellen)) + ')')

Now it looks a little bit better. BUT only when i resize the graphs-width. When i resize the graph to its height, im still getting the same problem.

I tried playing with the y-scale, but couldnt figure it out much how to solve this.

I dont get it how a simple line can cause such big problems :)