Question

我试图使用角度和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。试试......可能有帮助！

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

1 个答案: