为什么要将D3源代码复制到Angular服务？ [英] Why copy D3 source into an Angular Service?

问题描述

我尝试将d3用于一个有角度的项目，如 ng-newsletter 。

I tried using d3 into an angular project as mentioned in one of the primary examples on ng-newsletter. Which shows how to setup a D3 service within angular.

我想知道如何将D3作为Angular服务与Angular yeoman和bower兼容？

看来我需要该服务才能将D3服务注入我的指令。否则，当试图通过脚本标记将d3库包括到全局空间中时，我的Angular指令不能引用D3对象。

It appears I needed the service to be able to inject the D3 service into my directive. Otherwise, my Angular directive could not reference the D3 object when attempting to include the d3 library via a script tag into the global space.

我关心使用D3作为角度服务降低了从使用yeoman / grunt / bower的一些最佳实践中获得的代码的性能。例如

I'm concerned using D3 as an Angular service reduce performance in code that is gained from using some of the best practices from yeoman/grunt/bower. e.g. minified code, updating to future versions of D3 with bower.

推荐答案

我知道你的意思。如果使用bower，那么D3在全局范围中初始化。按照ng-newsletter上描述的方法将给你一个D3实例作为服务，但是你必须在bower外面管理它。

I know what you mean. If you use bower, then D3 is initialised in the global scope. Following the method described on ng-newsletter will give you a D3 instance as a service but you'll have to manage it outside of bower.

服务的整体点在AngularJS中，对象被初始化，因为他们需要。我决定的技术是一个妥协。它与Yeoman Angular生成器和bower一起工作，并将D3引入Angular服务。但是，服务实际上只是引用window.d3对象，所以AngularJS纯粹主义者可能会认为它是hacky。

The whole point of a service in AngularJS is that objects are initialised as they're needed. The technique I settled on is therefor a compromise. It works with the Yeoman Angular generator and bower and it puts D3 into an Angular service. However, the service is really just referencing the window.d3 object so AngularJS purists will probably think it's hacky.

首先，使用bower安装D3：

First, install D3 with bower:

bower install d3 --save

您的bower.json文件将更新为如下所示：

Your bower.json file will be updated to look like this:

{
  "name": "[YOUR_APP]",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.3.0",
    "bootstrap-sass-official": "^3.2.0",
    "angular-animate": "^1.3.0",
    "angular-cookies": "^1.3.0",
    "angular-resource": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-sanitize": "^1.3.0",
    "angular-touch": "^1.3.0",
    "d3": "~3.5.5"
  },
  "devDependencies": {
    "angular-mocks": "^1.3.0"
  },
  "appPath": "app",
  "moduleName": "[YOUR_APP]"
}

请注意，D3现在在 - d3：〜3.5.5。

Note that D3 is now in there - "d3": "~3.5.5".

当您在 http：// localhost：9000 上执行grunt serve查看网站时>，D3现在将被包括在全局范围中。另外，当你做一个grunt build时，它会与所有其他javascript一起被缩小和uglified，并复制到/ dist目录。

When you do a "grunt serve" to view the site on http://localhost:9000, D3 will now be included in the global scope. Also when you do a "grunt build" it will be minified and uglified along with all the other javascript and copied to the /dist directory.

到目前为止很好，但它在全局范围内，而不是在AngularJS服务，这是它应该是在哪里。

So far so good but it's in the global scope and not in an AngularJS service which is where it should be.

编写服务很简单。在您的app.js中，添加：

Writing a service is simple. In your app.js, add this:

angular.module('d3Module', []).factory('d3', [
  function(){

    var d3;
    d3 = window.d3;

    // returning our service so it can be used
    return d3;
}]);

也许这不是最好的方式来返回d3。也许应该使用module.exports，这篇文章的底部建议 - http://lorenhoward.com/blog/simple-way-integrate-d3-angular/ 。我不太熟悉AngularJS，所以我可能会缺少一个细微差别。

Maybe that's not the absolute best way to return d3. Maybe it should be done using module.exports as suggested at the bottom of this post - http://lorenhoward.com/blog/simple-way-integrate-d3-angular/. I'm not super familiar with AngularJS so I may be missing a nuance.

无论如何，只需添加D3Module到您的应用程序的模块列表：

Anyway, just add "D3Module" to the list of modules for your app:

var app = angular
  .module('[YOUR_APP]', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'd3Module'
  ])
  .config(function ($routeProvider) {

    // eg. Some rout stuff

  });

服务d3现在可以包含在指令中：

The service "d3" can now be included in a directive:

app.directive('ngLogo', ['d3', function(d3) {
  return {
    restrict: 'A',
    scope: {},
    link: function(scope, element) {

    // Do some SVG stuff, eg:
    var svg = d3.select(element[0]).append('svg');

    }};
  }]);

这篇关于为什么要将D3源代码复制到Angular服务？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！