Forum Discussion
How to draw a linear line by using a given slope
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 <-
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)
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?
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
Thanks this worked for me:
let sLine = this.g .append('g') .append('line') .classed('sLine', true) .attr('x1', x(0)) .attr('y1', y(0)) .attr('x2', x(viewModel.dataMax * this.slopeVal[0])) .attr('y2', y(viewModel.dataMax)) .attr('stroke', 'red');
12 Replies
The line is always rendered at the same position as you use fixed coordinates (.attr('x', x(0)) .attr('y', y(30))).
We'd recommned to use dynamic coordinates instead.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Thanks for your answer, i believe this is true but i dont have any idea how to define the coordinates dynamically.
Which variables i can use to realize this?
Any suggestions?
I guess you would need to get a coordinate by point's value.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals