javascript - 使用 AngularJS d3 处理 JSON 数据

Question

我有像 - 这样的 Angular 代码

$scope.data =[];
$http({
          method: "GET",
          url: "http://127.0.0.1:8000/api/",
        }).then(function success(response){
          var total = response.data.length;
          for(var i=0; i<response.data.length; i++){
            $scope.companies.push(response.data[i].companies);
            $scope.wtdcagr.push(response.data[i].wtdcagr);
          }
          for(var i=0; i<$scope.wtdcagr.length; i++){
            $scope.final_wtdcagr.push($scope.wtdcagr[i]+10);
            $scope.sum += $scope.final_wtdcagr[i];
          }
          $scope.max_val=$scope.sum/total;
          for(var i=0; i<$scope.final_wtdcagr.length; i++){
            $scope.data.push({"name":$scope.companies[i], "children":[{"name":$scope.companies[i], "size":$scope.final_wtdcagr[i]}]});
          }
          $scope.load=1;
        },function error(response){
      });
    $scope.componentsData ={"name":"root","children":[{"name":"Koutons Retail India","children":[{"name":"Koutons Retail India","size":10}]},{"name":"Liberty Shoes","children":[{"name":"Liberty Shoes","size":7.975043433750518}]},{"name":"Bharat Petroleum Corporation","children":[{"name":"Bharat Petroleum Corporation","size":22.985710309643373}]},{"name":"Chennai Petroleum Corporation","children":[{"name":"Chennai Petroleum Corporation","size":13.214542375972897}]},{"name":"Gujarat State Fertilizers & Chemicals","children":[{"name":"Gujarat State Fertilizers & Chemicals","size":9.054818244756332}]},{"name":"Hindustan Organic Chemicals","children":[{"name":"Hindustan Organic Chemicals","size":10.54768008048322}]},{"name":"Tata Coffee","children":[{"name":"Tata Coffee","size":9.905904053799995}]},{"name":"Coffee Day Enterprises","children":[{"name":"Coffee Day Enterprises","size":9.132573506417222}]},{"name":"Corporation Bank","children":[{"name":"Corporation Bank","size":9.413101403401246}]},{"name":"Dena Bank","children":[{"name":"Dena Bank","size":2.9519383428833708}]}]} ;
    // $scope.componentsData = {
    //     "name": "root",
    //     "children": $scope.data
    //   };

在我的html中-

<div id="treeParentDiv" style="width:1200px;height:600px;margin:auto" >
<treemap
        data="componentsData"
        parentElementId="treeParentDiv"
            color-label="size"
        size-label="size"
            max-val="10"
        search="{{searchbox}}"
            id="IDTreeMap">
</treemap>

当 $scope.componentsData 是静态时，它可以工作，但是当我尝试从 json 加载它并将其传递给 $scope.componentsData 时，例如 -

$scope.componentsData = {
     "name": "root",
     "children": $scope.data
   };

它无法工作。我正在使用的树状图是 https://github.com/poshak/treemap

我怀疑树形图是在 $scope.data 接收到数据之前渲染的。谢谢

Answer 1

在您的代码中，$scope.componentsData 在 $http promise (如果实现)之前设置。您需要将 $scope.componentsData 的设置移至 Promise 的成功回调中，如下所示:

  $http({
    method: "GET",
    url: "http://127.0.0.1:8000/api/",
  }).then(function success(response) {
    var total = response.data.length;
    for (var i = 0; i < response.data.length; i++) {
      $scope.companies.push(response.data[i].companies);
      $scope.wtdcagr.push(response.data[i].wtdcagr);
    }
    for (var j = 0; j < $scope.wtdcagr.length; j++) {
      $scope.final_wtdcagr.push($scope.wtdcagr[j] + 10);
      $scope.sum += $scope.final_wtdcagr[j];
    }
    $scope.max_val = $scope.sum / total;
    for (var k = 0; k < $scope.final_wtdcagr.length; k++) {
      $scope.data.push({
        "name": $scope.companies[k],
        "children": [{
          "name": $scope.companies[k],
          "size": $scope.final_wtdcagr[k]
        }]
      });
    }
    $scope.load = 1;
    $scope.componentsData = {
      "name": "root",
      "children": $scope.data
    };
  }, function error(response) {});