I saw many different pages on correctly installing D3 v4 in angular2, and it looks like you have a lot of different opinions on this. I am using angular2.0 along with typescript2. I had difficulty installing everything so that my IDE and ts compiler can see all the parts without errors. If I did something like import * like d3 from 'd3'; ts complains when I do d3.line (), although it works fine in the browser and displays the graph line. I get the 'line' property there is no type type of type d3. I also run into problems when I cannot invoke the switch to select () when I imported the selection from the d3 selection.
system.config.js
(function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', // other libraries 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 'ng2-tooltip': 'node_modules/ng2-tooltip', 'js-data': 'npm:js-data/dist/js-data.js', 'js-data-http': 'npm:js-data-http/dist/js-data-http.js', 'jquery':'npm:jquery/', 'd3': 'npm:d3', 'd3-array': 'npm:d3-array/', 'd3-axis': 'npm:d3-axis/', 'd3-collection': 'npm:d3-collection/', 'd3-color': 'npm:d3-color/', 'd3-dispatch': 'npm:d3-dispatch/', 'd3-ease': 'npm:d3-ease/', 'd3-format': 'npm:d3-format/', 'd3-interpolate': 'npm:d3-interpolate/', 'd3-path': 'npm:d3-path/', 'd3-scale': 'npm:d3-scale/', 'd3-selection': 'npm:d3-selection/', 'd3-shape': 'npm:d3-shape/', 'd3-time': 'npm:d3-time/', 'd3-time-format': 'npm:d3-time-format/', 'd3-timer': 'npm:d3-timer/', 'd3-transition': 'npm:d3-transition/' }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, 'angular-in-memory-web-api': { main: './index.js', defaultExtension: 'js' }, "ng2-tooltip": { "main": "index.js", "defaultExtension": "js" }, 'jquery': { "main": 'dist/jquery.js', "defaultExtension": "js"}, 'd3': { "main": 'build/d3.min.js', "defaultExtension": "js"}, 'd3-array': { "main": 'build/d3-array.min.js', "defaultExtension": "js"}, 'd3-axis': { "main": 'build/d3-axis.min.js', "defaultExtension": "js"}, 'd3-collection': { "main": 'build/d3-collection.js', "defaultExtension": "js"}, 'd3-color': { "main": 'build/d3-color.min.js', "defaultExtension": "js"}, 'd3-dispatch': { "main": 'build/d3-dispatch.min.js', "defaultExtension": "js"}, 'd3-ease': { "main": 'build/d3-ease.min.js', "defaultExtension": "js"}, 'd3-format': { "main": 'build/d3-format.min.js', "defaultExtension": "js"}, 'd3-interpolate': { "main": 'build/d3-interpolate.min.js', "defaultExtension": "js"}, 'd3-path': { "main": 'build/d3-path.min.js', "defaultExtension": "js"}, 'd3-scale': { "main": 'build/d3-scale.min.js', "defaultExtension": "js"}, 'd3-selection': { "main": 'build/d3-selection.min.js', "defaultExtension": "js"}, 'd3-shape': { "main": 'build/d3-shape.min.js', "defaultExtension": "js"}, 'd3-time': { "main": 'build/d3-time.min.js', "defaultExtension": "js"}, 'd3-time-format': { "main": 'build/d3-time-format.min.js', "defaultExtension": "js"}, 'd3-timer': { "main": 'build/d3-timer.min.js', "defaultExtension": "js"}, 'd3-transition': { "main": 'build/d3-transition.min.js', "defaultExtension": "js"} } }); })(this);
typings.d.ts
// Typings reference file, see links for more information // https://github.com/typings/typings // https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html /// <reference path="./node_modules/@types/d3/index.d.ts" /> /// <reference path="./typings/index.d.ts" /> // declare var module: { id: string }; /// <reference path="node_modules/@types/jquery/index.d.ts" /> /// <reference path="node_modules/@types/d3/index.d.ts" /> /// <reference path="node_modules/@types/d3-array/index.d.ts" /> /// <reference path="node_modules/@types/d3-axis/index.d.ts" /> /// <reference path="node_modules/@types/d3-collection/index.d.ts" /> /// <reference path="node_modules/@types/d3-ease/index.d.ts" /> /// <reference path="node_modules/@types/d3-dispatch/index.d.ts" /> /// <reference path="node_modules/@types/d3-scale/index.d.ts" /> /// <reference path="node_modules/@types/d3-selection/index.d.ts" /> /// <reference path="node_modules/@types/d3-shape/index.d.ts" /> /// <reference path="node_modules/@types/d3-time/index.d.ts" /> /// <reference path="node_modules/@types/d3-time-format/index.d.ts" /> /// <reference path="node_modules/@types/d3-timer/index.d.ts" /> /// <reference path="node_modules/@types/d3-transition/index.d.ts" />
package.json
{ "scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings" }, "dependencies": { "@angular/common": "2.0.0", "@angular/compiler": "2.0.0", "@angular/core": "2.0.0", "@angular/forms": "2.0.0", "@angular/http": "2.0.0", "@angular/platform-browser": "2.0.0", "@angular/platform-browser-dynamic": "2.0.0", "@angular/router": "3.0.0", "@angular/upgrade": "2.0.0", "@types/d3": "^3.5.36", "@types/d3-array": "^1.0.5", "@types/d3-axis": "^1.0.5", "@types/d3-collection": "^1.0.4", "@types/d3-dispatch": "^1.0.4", "@types/d3-ease": "^1.0.4", "@types/d3-scale": "^1.0.4", "@types/d3-selection": "^1.0.4", "@types/d3-shape": "^1.0.5", "@types/d3-time-format": "^2.0.4", "@types/d3-timer": "^1.0.4", "@types/d3-transition": "^1.0.4", "@types/jquery": "^2.0.32", "angular2-in-memory-web-api": "0.0.20", "bootstrap": "^3.3.6", "core-js": "^2.4.1", "d3": "^4.2.6", "jquery": "^3.1.1", "js-data": "^3.0.0-rc.4", "js-data-http": "^3.0.0-rc.2", "ng2-tooltip": "0.0.3", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.12", "systemjs": "0.19.27", "zone.js": "^0.6.25" }, "devDependencies": { "concurrently": "^2.2.0", "lite-server": "^2.2.2", "typescript": "^2.0.2", "typings": "^1.3.2" } }
I know that I have to do something wrong here, but I am far from being an expert in angular2, since I just picked it up recently.