"scale"和"svg"在"node_modules/@ types/d3/index"中不存在

Question

我正在尝试使用Angular 2和D3 JS创建条形图,下面是我添加的NPM包:

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

下面的typescript文件在编译时出错:

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");

错误是:

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

您的代码使用D3 v3,而您配置了库版本v4.4.0.由于v4现在是模块化的,因此所有命名空间都需要展平:

但是,采用ES6模块有一个不可避免的后果:D3 4.0中的每个符号现在共享一个平面命名空间而不是D3 3.x中的嵌套命名空间.

进一步来说:

1. 线性刻度包含在模块d3-scale中(参见更改):

   • d3.scale.linear↦ d3.scaleLinear

2. 轴属于模块d3轴.

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