D3 与 angular-cli答案

【问题标题】：D3 with angular-cliD3 与 angular-cli
【发布时间】：2016-04-16 17:04:53
【问题描述】：

我尝试将 angular-cli 与 D3 一起使用。之后

typings install d3 --save
npm install d3

我在 node_modules 中有

在typings文件夹中

angular-cli-build.js

module.exports = function(defaults) {
  var app = new Angular2App(defaults, {
    vendorNpmFiles: ['d3/d3.js']
  });
  return app.toTree();
};

index.html

System.config({
  packages: {
    app: {
      format: 'register',
      defaultExtension: 'js'
    }
  },
  d3: {
    'd3': 'vendor/d3/d3.js'
  }      
});

在bar-chart 指令中我尝试导入 d3

import {Directive} from 'angular2/core';
import d3 from 'd3';


@Directive({
  selector: 'bar-graph',
  providers: [],
  host: {},

})
export class BarGraph {

  constructor() {
    console.log(d3);
  }

}

但应用程序永远不会加载，console.log 说它试图获取 localhost:4200/d3。

【问题讨论】：

你找到答案了吗

标签： javascript angularjs d3.js angular-cli

【解决方案1】：

这是一个有效的答案！

npm install d3 --save

angular-cli-build.js

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...,
      'd3/build/*.js'
    ]
  });
};

system-config.js

map['d3'] = 'vendor/d3/build';

packages['d3'] = {
  main: 'd3',
  format: 'global' 
};

app.component.ts

import * as d3 from 'd3';

【讨论】：

【解决方案2】：

我也有同样的问题，我发现这个示例使用的是旧版本的 Angular (2.0.0-alpha.27)，但也许可以提供帮助。

https://github.com/gdi2290/ng-vegas-angular2-d3

【讨论】：

【解决方案3】：

我认为您需要在map 块中添加 d3 条目：

System.config({
  packages: {
    app: {
      format: 'register',
      defaultExtension: 'js'
    }
  },
  map: { // <-----
    'd3': 'vendor/d3/d3.js'
  }      
});

【讨论】：

【解决方案4】：

我让我按照接下来的步骤工作。

首次安装：

npm install d3 --save

然后像这样将 d3 添加到angular-cli-build.js：

// Angular-CLI build configuration
// This file lists all the node_modules files that will be used in a build
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'd3/build/d3.js'
    ]
  });
};

并修改你的system-config.ts：

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  "d3" : "vendor/d3/build/d3.js",
  'jquery': 'vendor/jquery/dist/jquery.js'
};

/** User packages configuration. */
const packages: any = {
  'moment': { format: 'cjs'},
  'jquery': { format: 'global'},
  "d3": { format: 'global'},
};

为确保 systemJS 加载您的模块，将导入添加到您的 index.ts 并删除用于避免编译问题的 d3 变量：

import 'd3'
declare var d3;

【讨论】：