用角度绘制带有 d3 折线图中实际值的趋势线

Plotting trend line with actual values in d3 line chart with angular

本文关键字：趋势线 折线图 d3 绘制      更新时间：2023-09-26

我正在尝试使用角度和 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");

您需要根据这些参数生成数据。

这是我的控制器中的一个工作示例：

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。尝试。。。可能会有所帮助！

相关文章：