'scale' and 'svg' does not exist in "node_modules/@types/d3/index"

Question

I am trying to create a bar graph using Angular 2 and D3 JS, below are NPM packages I added:

"d3": "4.4.0",
"d3-tip": "0.7.1",
"@types/d3": "^4.3.0",

Below typescript file gave error while compiling:

import { Component, ElementRef, ViewEncapsulation } from '@angular/core';
import * as d3 from 'd3';

@Component({
  selector: 'simple-bar-chart',
  template: require('./about.component.html'),
  styles: [require('./about.component.css').toString()]
})

export class AboutComponent {
constructor(public elementRef: ElementRef) {
}

ngOnInit() {
    var y = d3.scale.linear()
        .domain([0, 1])
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x0)
        .orient("bottom");

Errors are:

ERROR in ./angular2App/app/components/about/about.component.ts
(34,21): error TS2339: Property 'scale' does not exist on type 'typeof "App_path/node_modules/@types/d3/index"'.

ERROR in ./angular2App/app/components/about/about.component.ts
(44,24): error TS2339: Property 'svg' does not exist on type 'typeof "App_path/node_modules/@types/d3/index"'.

Answer 1

Your code uses D3 v3 whereas you configured a library version v4.4.0. Since v4 is now modular all namespaces needed to be flattened:

However, there is one unavoidable consequence of adopting ES6 modules: every symbol in D3 4.0 now shares a flat namespace rather than the nested one of D3 3.x.

More specifically:

1. The linear scale is included in module d3-scale (see changes):

   • d3.scale.linear ↦ d3.scaleLinear

2. Axes belong to module d3-axis.

   • d3.svg.axis().orient("bottom") ↦ d3.axisBottom(scale)