用d3折線圖中的實際值繪制趨勢線

Question

我正在嘗試使用angular和D3繪制實際值以及趨勢線。 我讀了許多教程，但不明白如何在d3中訪問控制器的多個變量。

我在控制器中有以下數據：

$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}

HTML：

<div linear-chart chart-data="salesData" line-data="lrResults"></div>

然后我有以下指令：

app.directive('linearChart', function($parse, $window){
   return{
      restrict:'EA',
      template:"<svg width='850' height='250'></svg>",
       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();
           });

使用上面的代碼，我能夠解析包含在salesData數據並使用以下d3代碼繪制折線圖：

 svg.append("svg:path")
       .attr("transform", "translate(70,0)")
               .attr({
                   d: lineFun(salesDataToPlot),
                   "stroke": "red",
                   "stroke-width": 2,
                   "fill": "none",
                   "class": pathClass
               });

但是我無法理解如何檢索lrResults包含的數據，然后在法線圖的頂部添加趨勢線。

這是我用來繪制線條的代碼片段：

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

Answer 1

您需要根據這些參數生成數據。

這是控制器內部的一個工作示例：

angular.module('d3-angular.controllers', [], function() {})
.controller('myCtrl', function($scope) {

    // svg parameters
    var width = 500, height = 500, margin = 50;

    // line parameters (y = mx + b)
    $scope.b = 0.3;
    $scope.m = 2;
    $scope.numPts = 20;

    // generate data
    var data = new Array($scope.numPts);
    for (var idx = 0; idx < $scope.numPts; idx++) {
            data[idx] = {
                    x: idx/$scope.numPts,
                    y: $scope.m*idx/$scope.numPts + $scope.b + (Math.random()-0.5)
            }
    }

    // build the scales
    var xScale = d3.scale.linear().domain([0,1]).range([margin,width-margin]);
    var yScale = d3.scale.linear().domain([0,2.5]).range([height-margin,margin]);

    // select our svg element, set up some properties
    var svg = d3.select("svg");
    svg.attr("width",width).attr("height",height);

    // add the trendline
    var line = svg.selectAll("line").data([{'p1': [0, $scope.b], 'p2': [1, $scope.m+$scope.b]}]);
    line.enter().append("line").attr("stroke","red").attr("stroke-width",2)
            .attr("x1", function(d) { return xScale(d.p1[0]) })
            .attr("y1", function(d) { return yScale(d.p1[1]) })
            .attr("x2", function(d) { return xScale(d.p2[0]) })
            .attr("y2", function(d) { return yScale(d.p2[1]) })

    // join with our data
    var points = svg.selectAll("circle").data(data);

    // enter (add circles)
    points.enter().append("circle")
            .attr("cx", function(d) {
                    return xScale(d.x);
            })
            .attr("cy", function(d) {
                    return yScale(d.y);
            })
            .attr("r", 5);

    // add Axes
    var xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickValues([0,1]);
    svg.append("g").attr("class","axis")
            .attr("transform", "translate(0," + (height-margin) + ")")
            .call(xAxis);
    var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);
    svg.append("g").attr("class","axis")
            .attr("transform", "translate(" + margin + ",0)")
            .call(yAxis);

}）

用m和b替換示波器參數“ slope”和“ intercept”。 嘗試...可能會有幫助！