title: Plotting trend line with actual values in d3 line chart with angular
body: <p>I am trying to plot actual values along with trend line using angular and D3. I read many tutorials but couldn't understand how we can access muliple variables of controller in d3. </p>
  
  <p>I have following data in controller:</p>
  
  <pre><code>$scope.salesData=[
          {hour: 1997,sales: 205000},
          {hour: 1998,sales: 305000},
          {hour: 1999,sales: 405000},
  
      ];
  
  $scope.lrResults = {slope: -16958.279411764706, intercept: 34325954.51470588, r2: 0.8292316961223657}
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div linear-chart chart-data="salesData" line-data="lrResults"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Then i have following directive:</p>
  
  <pre><code>app.directive('linearChart', function($parse, $window){
     return{
        restrict:'EA',
        template:"&lt;svg width='850' height='250'&gt;&lt;/svg&gt;",
         link: function(scope, elem, attrs){
             var exp = $parse(attrs.chartData);
             var salesDataToPlot=exp(scope);
  
  
             var padding = 20;
             var pathClass="path";
             var xScale, yScale, xAxisGen, yAxisGen, lineFun, trendline;
  
             var d3 = $window.d3;
             var rawSvg=elem.find('svg');
             var svg = d3.select(rawSvg[0]);
  
             scope.$watchCollection(exp, function(newVal, oldVal){
                 salesDataToPlot=newVal;
                 redrawLineChart();
             });
  </code></pre>
  
  <p>Using above I am able to parse data contained inside <code>salesData</code> and plot a line chart using following d3 code:</p>
  
  <pre><code> svg.append("svg:path")
         .attr("transform", "translate(70,0)")
                 .attr({
                     d: lineFun(salesDataToPlot),
                     "stroke": "red",
                     "stroke-width": 2,
                     "fill": "none",
                     "class": pathClass
                 });
  </code></pre>
  
  <p>But i am unable to understand how can i retrieve data contained in <code>lrResults</code> and then add a trend line on the top of normal plot.</p>
  
  <p>Here is the code snippet i would use to plot the line:</p>
  
  <pre><code>svg.append("svg:line")
                 .attr("x1", xScale(0))
                 .attr("y1", yScale(lrData.intercept))
                 .attr("x2", xScale(max))
                 .attr("y2", yScale((max*lrData.slope)+ lrData.intercept))
                 .style("stroke", "black");
  </code></pre>