Forum Discussion
Resolver IHow to draw a linear line by using a given slope
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');
Resolver IThanks for your help Ignat,
the x-scale is needed because we also have negative values on the x-axis. When i set 0 instead of x(0) it will draw the line on the smallest value (-7 or so). It also doesnt solve the main problem unfortunately,
Do you want to check out my code so you will get a better picture of it? I uploaded my randomized dataset, my project folder and also the .pbix file for you and commented it as far as i could: https://drive.google.com/open?id=1g4u6AaQw-X8fdQqOT5Ela55HTJWzONlN
I would be glad if we can solve this problem together, im stuck on this final part for my visual.
Community ChampionIt seems this issue is related to scaling the main chart if we resize a visual.
I'm not sure what part of code applies scaling but it must be applied to the line as well.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
- v-viig
Do you really have to rotate a line (rect element)?
Have you tried to use line element isntead?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
- v-viig
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
- az2451
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'); - az2451
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:
Spoiler// Scale of x-axislet x = d3.scale.linear().range([0, gWidth]).domain([(d3.min(viewModel.dataPoints, function(d) { return <number>d.gesamtKosten; }) - meanGesamtKosten),(d3.max(viewModel.dataPoints, function(d) { return <number>d.gesamtKosten; }) + meanGesamtKosten)]);// Scale of y-axislet y = d3.scale.linear().range([gHeight, 0]).domain([(d3.min(viewModel.dataPoints, function(d) { return <number>d.anzahlKostenstellen; }) - meanAnzahlKostenstellen),(d3.max(viewModel.dataPoints, function(d) { return <number>d.anzahlKostenstellen; }) + meanAnzahlKostenstellen)]);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 :)
- az2451
I tried that but i think line is not supported because nothing shows up at all
let sLine = this.g .append('g') .append('line') // rect and circle works, but line doesnt however .classed('sLine', true) .attr('x1', x(0)) .attr('y1', y(5)) .attr('x2', x(10)) .attr('y2', y(20)) .attr('width', 2) .attr('height', 500);