D3 on Angular：如何在 Angular 指令中使用 d3-plugins答案

【问题标题】：D3 on Angular: How to use d3-plugins in Angular directiveD3 on Angular：如何在 Angular 指令中使用 d3-plugins
【发布时间】：2014-10-30 16:21:54
【问题描述】：

我已经在我的 Angular 应用程序中使用 d3，就像在 BLOG POST 中描述的那样。但是我想在我的应用程序中使用一个名为fisheye 的D3-PLUGIN。我已经用 bower 安装了它，包括依赖项：

"d3-plugins-fisheye": "https://raw.githubusercontent.com/d3/d3-plugins/master/fisheye/fisheye.js"

之后，我将该文件包含在我的 index.html 中。加载工作正常。

<script src="bower_components/d3-plugins-fisheye/index.js"></script>

但是我不能在我的 d3 指令中使用var fisheye = d3.fisheye.circular().radius(120);。 D3 工作正常。我已经尝试通过服务加载附加插件：

angular.module('fisheye', [])
  .factory('fisheyeService', ['$document', '$q', '$rootScope', function($document, $q, $rootScope) {
  var d = $q.defer();
  function onScriptLoad() {
    // Load client in the browser
    $rootScope.$apply(function() { d.resolve(window.fisheye); });
  }
  // Create a script tag with fisheye 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 = 'bower_components/d3-plugins-fisheye/index.js';
  scriptTag.onreadystatechange = function () {
    if (this.readyState === 'complete') { onScriptLoad(); }
  };
  scriptTag.onload = onScriptLoad;

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

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

并在我的 d3 指令中使用它：

d3Service.d3().then(function(d3) {
  fisheyeService.fisheye().then(function(fisheye) {

    ...

    var fisheye = d3.fisheye.circular().radius(120);
    //var fisheye = fisheye.circular().radius(120);

    ...

  });
});

但它仍然无法正常工作。有谁知道如何在我的指令中加载额外的 d3 插件？

【问题讨论】：

标签： javascript angularjs d3.js

【解决方案1】：

我确实通过在我的指令中使用我的问题中的 fisheyeService 来解决它，如下所示：

fisheyeService.fisheye().then(function() {
  var fisheyePlugin = d3.fisheye;
  d3Service.d3().then(function(d3) {
    d3.fisheye = fisheyePlugin;

    ...

    var fisheye = d3.fisheye.circular().radius(120);

    ...

您可以使用this BLOG POST 获取更多说明。

【讨论】：