score:3

Accepted answer

The code you have put is a little heavy for me to angularize but I ll try to illustrate your case with some snippets :)

First create a DOM where you want to inject your angular directive which will make the d3 chart.

That's done like this:

<svg linear-chart></svg>

Here linear-chart will trigger the directive. So lets see a directive:

app.directive('linearChart', function () {
    return {
        restrict: 'EA',

        link: function (scope, elem, attrs) {
        //all your code for making the force layout
}});

Next challenge the data is pulled via async task done by web worker.

$scope.buildchart = function(widget) {
        var w2 = new Worker("scripts/webworkers/bigQueryWorker.js");           
        w2.postMessage($scope.selectedClass + "," + $rootScope.hierarchystring.toString() + "," + "Hierarchy" + "," + Digin_Engine_API);
        w2.addEventListener('message', function(event) {
            hierarchyRetrieved(event);
        });

        function hierarchyRetrieved(event) {
            var obj = JSON.parse(event.data);
            $scope.data = obj;//setting the data into the scope object.

        };
    };

So now whenever your async task completes the scope data is set to that. We know that the value inside the scope data changes so we need to have a watch function which will trigger the link function on change of the $scope.data

Something like this

app.directive('linearChart', function () {
    return {
        restrict: 'EA',

        link: function (scope, elem, attrs) {
            //this will watch the scope data
            scope.$watch(
                "data",function(){/*your d3 code for making the forcelayout which will get triggred when scope.data changes :)
*/})...

Here is a small fiddle

Note: Here i am mocking your webworker code by a button click in the loadData function.

Hope this helps! :)


Related Query

More Query from same tag