如何将D3和D3plus注入到角度webapp应用程序中？

Question

我正在尝试将d3Plus示例代码(http://d3plus.org/examples/basic/32517cfde67270c99092/)包含在我的webapp应用程序中。

骨架代码

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

error ：当我尝试自定义标记(使用d3Plus创建的指令)时，我在控制台中得到以下错误: angular.js行中的ReferenceError: d3 is not defined：11496

有什么帮助吗？

编辑1：基于d3的标签-d3-栏运行良好。

Answer 1

如何将d3.js作为依赖项注入到angular.js中，将在这ng-通讯中描述

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/d3+指令中包括如下承诺函数：

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

           }
         }
      }
   }
}
]);

Answer 2

我不认为您将d3作为依赖项传递。相反，您直接从js源包含(即<script src="http://d3js.org/d3.v2.js"></script>)引用它。

你可以找到一个在github上的工作示例。

源代码的其他示例可以在这里找到：用AngularJS实现D3.js可视化库，nvd3.js，d3.js图表的Angular.js指令。

如果你喜欢youtube视频：AngularJS & D3:可视化指令

-harold