Html 如何将REST响应放回angular JS标记中以绘制D3 JS饼图

本周我开始学习Angular Js和D3 Js。下面的代码可能很可怜，但请容忍我

问题：我试图使用一个返回json{chatjson:[10,20,30]}的REST服务。 我想用REST提供的[10,20,30]绘制一个饼图

代码概述：我正在ng控制器“validateCtrl”中使用三个REST服务。两个服务运行良好，并以角度显示所需的数据，但第三个REST中的函数“$scope.getChartData”返回{chatjson:[10,20,30]}，这是JSON，它应该基于以下位置的响应显示饼图： 角度代码中的甜甜圈图表标记，我没有得到。 D3JS代码写在底部。D3代码适用于硬编码数据

实际代码

---

我认为主要的问题是指令只运行一次链接功能。问题中发布的代码将完成链接功能中的所有绘图，而链接功能只能访问初始硬编码数据

然后，解决方案是以一种可以从观察者调用的形式将绘图代码与链接函数分离：

app.directive('donutChart',function(){
    function link(scope,element){
      scope.el = element[0]; // Cache a reference to the element
      draw(scope.data, scope.el); // Initial draw
    }

    function draw(data, el) {
      var color = d3.scale.category10(),
          width = 500,
          height = 500,
          min = Math.min(width,height),


          pie = d3.layout.pie().sort(null),
          arc = d3.svg.arc()
                  .outerRadius(125)
                  .innerRadius(75);

      d3.select("svg").remove(); // Clear old pie chart

      var group = d3.select(el).append('svg')
            .attr({width:width,height:height})
            .append('g')
            .attr('transform','translate('+width/2+','+height/2+')'),

          arcs = group.selectAll(".arc")
            .data(pie(data))
            .enter()
            .append('g')
            .attr("class","arc");

      arcs.append("path")
          .attr("d",arc)
          .attr("fill",function(d){return color(d.data);});

      arcs.append("text")
          .attr("transform",function(d){return "translate (" + arc.centroid(d)+")";})
          .text(function(d){return d.data;});
    }

    return{
      link: link,
      restrict:'E',
      scope:{data:'='},
      // Add a controller here to $watch for data changes
      controller: function($scope) {
        $scope.$watch('data', function(newData) {
          draw(newData, $scope.el); // Re-draw the chart
        });
      }
    };
  });

我注意到的另一件事可能不是实际问题，因为它取决于实际的服务器响应。设置图表数据时，可以执行以下操作：

$scope.chartData = response;

然而，根据你的问题，预期的回答如下：

{ "chartjson": [10, 20, 30] }

如果是这种情况，测试图表数据只是一个数组，如下所示：

$scope.chartData = [12, 13, 60];

然后我希望从如下响应中获得数组：

$scope.chartData = response.chartjson;

您可以看到，我模拟了$httpBackend以从您的问题中返回示例对象，对于任何感兴趣的人来说，这似乎是可行的。

。现在写下答案。

$scope.chartData = response.chartjson;