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

Question

I am trying to create a histogram using Angular 2 and D3 JS, the NPM packages are listed below:

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

The following typescript file gave an 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:

 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 , while you configured the version of the v4.4.0 library. Since v4 is now modular, all namespaces should be flattened :

However, there is one inevitable consequence of using ES6 modules: each character in D3 4.0 now uses a flat namespace, rather than nested from D3 3.x.

More specific:

• Linear scale is included in the d3-scale module (see changes ):

  • d3.scale.linear ↦ d3.scaleLinear

• The axes belong to the d3-axis module.

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