BowerインストールからD3をAngular Projectに使用する方法D3

Question

Angular ApplicationにD3を含めるようにしていますが、Bower InstallからD3を読み込めないようです。 - は綴られています。アプリケーションはgulpを使用してbower_componentsを取得し、そこからビルドするように設定されています。 d3とは違ったものがありますが、これはgulpビルドプロセスに含まれていませんか？

ここは私のコンポーネントですが、私はD3のソースコードにアクセスできません。 bowerのインストールからアクセスできるはずはありませんか？単純な "d3"モジュールを作成し、その中からd3変数を工場で返すと言うスタックオーバーフロー問題を見ましたが、私はwindow.d3から未定義になります...？

angular.module("diagram", ["d3"]).directive("ersDiagram", ["$compile", "$document", function($compile:ng.ICompileProvider, $document:ng.IDocumentService) { 
    return { 
     restrict: "E", 
     replace: true, 
     templateUrl: "diagram/template/diagram.html", 
     scope: { 
      nodes: "=", 
      edges: "=", 
      autoResizeGraph: "@?", 
      enableMouseWheelZoom: "@?", 
      selectedNode: "=?", 
      selectedEdge: "=?", 
      height: "@?", 
      onSelected: "&?", 
      onEdgeSelected: "&?", 
      direction: "@?", 
      enableZoomButtons: "@?" 
     }, 
     controller: DiagramComponent, 
     bindToController: true, 
     controllerAs: "ctrl", 
     link: function (scope:ng.IScope, elem:ng.IAugmentedJQuery, attrs:ng.IAttributes, ctrl:any) { 
       //d3 code here 
       //get undefined for all d3 code 
      } 

なぜ私はアプリケーションに注入するだけでD3にアクセスできないのですか？それはビルドに含まれていない暴言と関係がありますか？ D3をビルドに含めるにはどうすればよいのでしょうか？

しばらくお待ちしておりますので、大変助かりました！

さらに詳しいコードが必要な場合は、私に知らせてください。

あなたはD3モジュールを作っていないので、どのようにこの angular.module("diagram", ["d3"])ような何かを書くことができますあなたの場合は

Answer 1

..

それを行うための正しい方法は、まずD3と呼ばれるモジュールを作るです。 これで、ajaxを介してスクリプトをロードし、約束を返します。

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; 
     } 
     }; 
    } 
    ]); 

あなたのHTMLの中に。

<div my-directive></div> 

属性my-directiveを参照するように指示します。

ディレクティブのリンク機能は、このようなディレクティブで注入されたd3serviceを利用します。ブログに触発さ

var link = function(scope, element, attrs) { 
    d3Service.d3().then(function(d3) { 
     //make your svg 
     var svg = d3.select(element[0]) 
     .append('svg') 
     .style('width', '400') 
     .style('height', '500') 
     svg.append("circle").attr("r", 10).attr("cx", 100).attr("cy", 100).style("fill", "red"); 
    }); 
    }; 

作業コードhere

here