Javascript 如何注入D3&；D3plus在Angular webapp中一起使用？

我试图在基于angular的webapp中包含d3Plus示例代码（）

框架代码：

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) {....}])

错误： 当我尝试自定义标记（使用d3Plus创建的指令）时，我在控制台中遇到以下错误：

ReferenceError:d3未在angular.js行中定义

：11496

有什么帮助吗

---

编辑1：基于d3的标记-d3条工作正常。

我不认为您将

d3作为依赖项传递。相反，您可以直接从js源代码include引用它（即
）

你可以找到一份工作

其他源代码示例可在此处找到：

如果您喜欢youtube视频：

-harold
中介绍了如何将d3.js作为依赖项注入angular.js中：

同样的事情也可以应用于任何其他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

           }
         }
      }
   }
}
]);

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

           }
         }
      }
   }
}
]);