如何从 Bower 使用 D3 到 Angular 项目安装 D3

Question

我正在尝试将 D3 包含到我的 Angular 应用程序中，但似乎无法从 Bower 安装中加载 D3，因为 Angular 说它找不到它或拼写错误。该应用程序设置为使用 gulp 获取 bower_components 并从那里构建。 d3 有什么不同之处使其无法包含在 gulp 构建过程中吗？

这是我的组件，我无法访问 D3 源代码。我不应该能够从凉亭安装中访问它吗？我见过一些堆栈溢出问题，他们说要创建一个简单的“d3”模块并在工厂中从中返回一个 d3 变量，但我从 window.d3 得到 undefined ...？

   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 包含在构建中吗？

卡了一段时间，非常感谢帮助！

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

Answer 1

在你的情况下，你没有制作 d3 模块，那么你怎么能写这样的东西angular.module("diagram", ["d3"])..

正确的做法是首先制作一个名为 d3 的模块。 在此我们通过 ajax 加载脚本并返回它的 promise。

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