AngularJS и D3.js V4, d3.json выпуск

Question

Я пытаюсь интегрировать мой d3.js код с AngularJS и у меня возникли проблемы с функцией d3.json

var OrgChartApp = angular.module('OrgChartApp', []); 

//APP CONTROLLER 
OrgChartApp.controller('OrgChartCtrl', function ($scope, $window) { 

    var i = 0, 
     stratify, 
     data, 
     tree;                             

    data = d3.json("orgChartDataSMALL.json",function(error, data){ 

    if(error) throw error; 
    $scope.$apply(function(){//Setting up data for stratification by indicating what will be the parent and children nodes 
     console.log('applying'); 
     stratify = d3.stratify() 
        .id(function(d) {return d.FullName;})//Position 
        .parentId(function(d) {return d.Manager;});//Manager's position 

     $scope.root = stratify(data); //Transforming linear data into hierarchical data 

     //Data needs slight remapping before feeding it into tree layout. 
     $scope.root.each(function(d) { 

     d.name = d.id; //transferring name to a name variable 
     d.id = i; //Assigning numerical Ids 
     i++; 
     /*Calculating the numbers of employe under managers*/ 
     d.headcount = getDescendants(d); 
     }); 

    }); 

    }); 

    console.log($scope.root);//THIS COMES BACK AS UNDEFINED 

    //This function allows to figure out, how many employee are under a manager. 
    function getDescendants(node) { 
      if(!node.children && !node._children) { 
       return 0; 
      } 
      var total = 0; 

      if(node.children){ 
       node.children.forEach(function(d) { 
       total += 1+getDescendants(d); 
      }) 
      }else if(node._children){ 
       node._children.forEach(function(d) { 
       total += 1+getDescendants(d); 
      }) 
      } 

      return total; 
     }          

}); 

console.log под d3.json возвращается как неопределенный, и когда я передаю данные своей директиве, я получаю то же самое. Я чувствую, что есть простой ответ, но я не могу понять это ...

<div ng-App='OrgChartApp' ng-controller="OrgChartCtrl"> 
    <!-- Here's where our visualization will go --> 
    <ochart-visualization root="root"></ochart-visualization> 
</div> 

А вот верхняя часть моей директивы:

//APP DIRECTIVES 
OrgChartApp.directive('ochartVisualization',function($window, $document){ 

    return { 
    restrict: 'E', 
    scope: { 
     root: '=' 
    }, 
    link: function (scope, element) { 

Я попытался вдохновить себя, http://bl.ocks.org/vicapow/9496218

Answer 1

Поставив часы на корневую переменную в моей директиве, я смог заставить ее работать, поскольку метка указала на асинхронный характер этой функции, поэтому console.log не был определен. Настройка $ watch в директиве и только действие, когда root не было undefined, сделал трюк!