javascript - angular-cliを使用したD3

Question

D3でangular-cliを使用しようとしています。後

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-chartd3 をインポートしようとしています

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


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

})
export class BarGraph {

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

}

しかし、アプリは読み込まれず、console.loglocalhost:4200/d3 を取得しようとしていると表示されます。

Answer 1

次の手順に従って作業しました。

最初のインストール:

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を delcare します。d3

import 'd3'
declare var d3;