How to draw a linear line by using a given slope

[az2451]

Hello there, i have an urgent problem here that i cant solve...

I'm trying to draw a linear line in a scatter plot to visualize a given slope-value.

First of all, this is how i calculate my "slope" by simply dividing each value from the x-axis with each value of the y-axis.

-> Btw: This will only change the color-values of the datapoints, not the actual datapoint-positions <-

Spoiler

function visualTransform(...) {

...

for (let i = 0; i < myCategory.values.length; i++) {

   if((xAxisValues[i]/yAxisValues[i]>0.2){
				
	   colorVal = 'blue';
				
   } else {
				
	   colorVal = 'yellow';
				
   }

}

...

}

For example, this is how the scatter plot looks like with a slope of 0.2 in comparison with a slope of 1

Now im looking for a solution for how to draw a linear line by using a given slope.

I tried that of course by creating a svg element and just rotating it by converting the slope-value in to degrees, like in this function (-> a slope of 0.2 is about 11.3 degrees)

Spoiler

function getAngleDeg(ax,ay) {
   var angleRad = Math.atan(ay/ax);
   var angleDeg = angleRad * 180 / Math.PI;
   return(angleDeg);

// if the slope is 0.2, this will be about 78.69 deg. But we have to subtract it from 90 as the line is in a 90 deg position, which makes 11.3

}

...

// Drawing the linear line:

             let sLine = this.g
                .append('g')
                .append('rect')
                .classed('sLine', true)
                .attr('x', x(0))
                .attr('y', y(30))
                .attr('width', 2)
                .attr('height', gHeight)
                .attr('transform', 'rotate(' + (getAngleDeg(0.2,1)) + ',' + x(0) + ',' + y(30) + ')')
                .style('fill-opacity', viewModel.settings.generalView.opacity/100); 

But unfortunately this only works partial for me.

As you can see in the picture, at a certain point it works fine:

But as i scale the visual smaller it looks totally wrong, because the datapoints begin to compress more and more. The line is not affected however:

I dont know how to fix this... My next idea was to subtract the degree-value by using a multiplier as the visual-sandbox size changes. Didnt worked either.

There must be an easier way!

Does anyone has a solution?

[v-viig · Accepted solution]

The width and height are not supported by a line element.

It seems you should apply a color to this line.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com