JSON-Daten mit AngularJS d3

Question

Ich habe Winkel Code wie -

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

und in meinem 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> 

Es funktioniert, wenn $scope.componentsData statisch ist das ist, aber wenn ich versuche, um es von json zu laden und es an die $scope.componentsData like-

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

zu übergeben

Es funktioniert nicht. Die Treemap, die ich verwende, ist https://github.com/poshak/treemap

Ich vermute, dass die Treemap rendert, bevor die Daten von $scope.data empfangen werden. Danke

Answer 1

In Ihrem Code $ scope.componentsData wird gesetzt, bevor das $ http-Versprechen erfüllt wird. Sie müssen die Einstellung von $ scope.componentsData in den Erfolg Rückruf der Verheißung, wie diese bewegen:

$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) {}); 

Answer 2

Sie benötigen $ scope.componentsData innerhalb der dann Funktion zu aktualisieren. wenn erfüllt

$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; 
 
     $scope.componentsData = { 
 
     "name": "root", 
 
     "children": $scope.data 
 
     }; 
 
     },function error(response){ 
 
     }); 
 

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