Forum Discussion

az2451's avatar
az2451
Icon for Resolver I rankResolver I
8 years ago
Solved

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 m...
Need Help
  • v-viig's avatar
    v-viig
    8 years ago

    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

    [email protected]

  • az2451's avatar
    az2451
    8 years ago

    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's avatar
az2451
Icon for Resolver I rankResolver I
8 years ago

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?

v-viig's avatar
v-viig
Icon for Community Champion rankCommunity Champion
8 years ago

I guess you would need to get a coordinate by point's value.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

[email protected]

  • az2451's avatar
    az2451
    Icon for Resolver I rankResolver I
    8 years ago

    Well, i can set the y-axis by using the datapoints-value like so:

     

              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.yAxisValues; })))
                .attr('width', d3.min([height, width]) * BarChart.Config.weightMultiplier)
                .attr('height', (gHeight))
                .attr('transform', 'rotate(' + (7) + ',' + x(0) + ',' + y((d3.max(viewModel.dataPoints, function(d) { return <number>d.yAxisValues; }))) + ')')
                .style('fill-opacity', viewModel.settings.generalView.opacity/100);

    But thats still not solving the issue like in the pictures i showed before.

     

    The x-axis needs to be always 0,  because the linear line should only rotate from 0

     

    Im getting so frustated on this :)

    • v-viig's avatar
      v-viig
      Icon for Community Champion rankCommunity Champion
      8 years ago

      I think there're no need to use scaling to draw a line. You might use 0 instead of x(0).

       

      Have you already tried such solution?

       

      Ignat Vilesov,

      Software Engineer

       

      Microsoft Power BI Custom Visuals

      [email protected]

      • az2451's avatar
        az2451
        Icon for Resolver I rankResolver I
        8 years ago

        Thanks 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.