如何在Angular webapp中注入D3和D3plus？

Question

我想在我的webapp中基于角度包含d3Plus示例代码（http://d3plus.org/examples/basic/32517cfde67270c99092/）。

骨架代码：

angular.module('UI', ['UI.controllers', 'UI.directives']); 
angular.module('d3Plus', ['d3']); 
angular.module('d3', []); 
angular.module('UI.controllers', []); 
angular.module('UI.directives', ['d3Plus']); 

angular.module('d3').factory('d3',[function(){ 
    var d3;  
    d3=minimized/code/of/d3.js 
    return d3; 
}]) ; 

angular.module('d3Plus').factory('d3Plus',['d3', function(){ 
    var d3Plus;  
    d3Plus=minimized/code/of/d3Plus.js 
    return d3Plus; 
}]) ; 


angular.module('UI.directives').directive('d3Bars', ['d3', function(d3) {....}]) 
angular.module('UI.directives').directive('d3plusMap', ['d3Plus', function(d3) {....}]) 

错误：在angular.js线 ReferenceError: d3 is not defined： 当我尝试定制标签（使用d3Plus指令创建的），我得到我的控制台以下错误：11496

任何帮助？

编辑1：基于d3的标签 - d3-bars工作正常。

Answer 1

我不认为你通过d3作为依赖。相反，您可以直接从您的js源代码中引用它（即<script src="http://d3js.org/d3.v2.js"></script>）

您可以找到working example here on github。

源代码的其他示例可以在这里找到：D3.js Visualization Library with AngularJS,Angular.js Directives for nvd3.js, d3.js charts。

如果你喜欢的YouTube视频：AngularJS & D3: Directives for Visualizations

-harold

Answer 2

你怎么可以注入d3.js作为一个angular.js依赖于this ng-newsletter描述：

angular.module('d3', []) 
.factory('d3Service', ['$document', '$q', '$rootScope', 
    function($document, $q, $rootScope) { 
    var d = $q.defer(); 
    function onScriptLoad() { 
    // Load client in the browser 
    $rootScope.$apply(function() { d.resolve(window.d3); }); 
    } 
    // Create a script tag with d3 as the source 
    // and call our onScriptLoad callback when it 
    // has been loaded 
    var scriptTag = $document[0].createElement('script'); 
    scriptTag.type = 'text/javascript'; 
    scriptTag.async = true; 
    scriptTag.src = 'http://d3js.org/d3.v3.min.js'; 
    scriptTag.onreadystatechange = function() { 
     if (this.readyState == 'complete') onScriptLoad(); 
    } 
    scriptTag.onload = onScriptLoad; 

    var s = $document[0].getElementsByTagName('body')[0]; 
    s.appendChild(scriptTag); 

    return { 
     d3: function() { return d.promise; } 
    }; 
    }]); 

同东西可以应用于任何其他JS库。对于d3plus，我的工作模块/工厂看起来是这样的：

angular.module('d3plus', []) 
    .factory('d3plusService', ['$document', '$window', '$q', '$rootScope', 
    function ($document, $window, $q, $rootScope) { 
    var d = $q.defer(), 
    d3plusService = { 
     d3plus: function() { 
     return d.promise; 
     } 
    }; 

    function onScriptLoad() { 
    // Load client in the browser 
    $rootScope.$apply(function() { 
     d.resolve($window.d3plus); 
    }); 
    } 
    var scriptTag = $document[0].createElement('script'); 
    scriptTag.type = 'text/javascript'; 
    scriptTag.async = true; 
    scriptTag.src = 'path/to/d3plus.min.js'; 
    scriptTag.onreadystatechange = function() { 
    if (this.readyState == 'complete') onScriptLoad(); 
    }; 
    scriptTag.onload = onScriptLoad; 

    var s = $document[0].getElementsByTagName('body')[0]; 
    s.appendChild(scriptTag); 

    return d3plusService; 
}]); 

一定要包括你的D3/d3plus指令承诺的功能，像这样：

app.directive('myD3Directive', ['d3Service', 'd3plusService', 
function(d3service, d3plusService) { 
    return { 
     restrict: 'E', 
     link: function(scope, elem, attrs) { 

     d3service.d3().then(function (d3) { 

      d3plusService.d3plus().then(function (d3plus) { 

      // your code 

      } 
     } 
     } 
    } 
} 
]);