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"'.
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:
The linear scale is included in module d3-scale (see changes):
Axes belong to module d3-axis.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With