Javascript 如何使用D3从Bower安装D3到Angular Project

我试图将D3包含到我的Angular应用程序中，但似乎无法从Bower安装中加载D3，因为Angular说它找不到或拼写错误。应用程序被设置为使用gulp获取bower_组件并从中构建。d3是否有什么不同之处使其不被包括在构建过程中

这是我的组件，我无法访问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注入应用程序来访问它？这可能与gulp有关，但不包括在构建中？如果是常见的情况，有人知道如何将D3包含在构建中吗

被困了一段时间，非常感谢您的帮助

---

如果您需要查看任何更具体的代码，请告诉我。

在您的情况下，您不是在制作d3模块，那么您如何编写像这样的

angular.module（“图表”[“d3”]）

正确的方法是首先制作一个名为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>

工作代码

---

受博客启发

谢谢Cyril..我正在使用bower安装D3，所以我试图避免使用脚本标记，还是我仍然需要bower的脚本标记？如果我使用bower安装，为什么我必须创建一个D3模块？这本质上不是一个模块本身吗？我也尝试过创建一个d3模块，我在第一个答案的另一篇帖子中看到了一些东西，但是我从工厂返回的d3变量中没有定义：在我的答案中，d3模块是角度模块。这是用angular1制作模块的方法。鲍尔永远不会帮你的。如果bower已经在html中引入了所有依赖项，那么只需在这里插入行…

[d3]

“angular.module”（“diagram”，[“d3”]）并直接在link函数中使用d3。好的，是的，我已经从所有bower_组件中构建了文件，但当我尝试注入d3并直接使用它时，我得到了“d3未定义”.我在我的bower_组件中看到d3，但出于某种原因，我可以访问除d3之外的所有内容

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