在"node_modules/@ types/d3/index"目录中不存在"scale"和"svg". [英] 'scale' and 'svg' does not exist in "node_modules/@types/d3/index"

问题描述

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

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

错误是:

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"'.

推荐答案

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

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:

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

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.

更具体地说:

1. 线性比例尺包含在模块 d3-scale (请参见更改):

• d3.scale.linear↦ d3.scaleLinear

轴属于模块 d3轴.

• d3.svg.axis().orient("bottom")↦ 查看全文