1

我正在尝试基于 Angular在我的 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) {....}])

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

有什么帮助吗？

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

4

2 回答 2

4

在这个 ng-newsletter中描述了如何将 d3.js 作为依赖项注入到 angular.js 中：

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 指令中包含 promise 函数，如下所示：

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

           }
         }
      }
   }
}
]);
于 2015-09-11T14:48:47.143 回答
-2

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

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

可以在此处找到带有源代码的其他示例：D3.js Visualization Library with AngularJS、Angular.js Directives for nvd3.js、d3.js charts。

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

-哈罗德

于 2014-12-05T07:41:09.057 回答