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');

     

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

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

[email protected]

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]