Properly install D3 v4 into Angular2

Question

I've seen many different pages on properly installing D3 v4 into angular2 and there seems to be tons of different opinions on the subject. I'm using angular2.0 along with typescript2. I'm having difficulty installing everything properly so that my IDE and ts compiler see all the parts without errors. If I've done something like import * as d3 from 'd3'; ts complains when I do d3.line() even though it runs fine in the browser and renders the graph line. I get property 'line' does not exist on type 'type of d3'. I'm also running into issues where I can't call transition on select() when I imported the select from 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 I must be doing something wrong here but I'm far from being an expert on angular2 since I only just picked it up recently.

Answer 1

You're using v4.2.x of d3 but the typings are for v3.5.x. Refer to https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11367 for an explanation about why the default version is 3.x.

This D3 Standard bundle is published as a UMD module of name d3. Currently, the definitions for this standard bundle cannot be published in DefinitelyTyped/types-2.0 (see closed PR #10453) due to existing dependencies of other libraries on the legacy D3 v3.x definitions (e.g. plottable, nvd3) contained in the same directory.

With the sincerest hope that it remains a temporary workaround, developers who need a definition file representing the D3 version 4 may proceed as follows:

Install the module-level definitions for the D3 modules comprising the D3 standard bundle individually, using e.g. npm install @types/d3-selection --save

Alternatively, if it works for your use case you could try angular2 d3 service: https://github.com/tomwanzek/d3-ng2-service