Ich habe Winkel Code wie -JSON-Daten mit AngularJS d3
$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
In Ihrem Code $ scope.componentsData vor dem $ http Versprechen gesetzt zu werden. Sie müssen die Einstellung von $ scope.componentsData in den Erfolgsrückruf des Versprechens verschieben – jbrown