Angular2/Typescript + D3v4 - 타이핑을 수동으로 포함합니까?

Question

저는 Angular2 앱으로 D3을 구동하려고했습니다.
그러나 새로운 D3v4 사용 가능한 typings 파일과 함께 현재의 문제, 즉 오류
Property 'scaleLinear' does not exist on type 'typeof d3'.
 

가 발생합니다 같은 대신 더 이상 사용할 수 scale.linear()의 scaleLinear() 새로운 방법을 사용하려고 할 것 같다

tomwanzek이 이미 문제에있어 새로운 정의를 https://github.com/tomwanzek/d3-v4-definitelytyped에 작성하려고 시도했기 때문에 angle2 프로젝트에 이미 사용 가능한 입력 파일을 수동으로 포함시키는 방법이 있는지 궁금합니다.

내가 @ 유형/d3v4의 drewmoore의 제안에 대해 알고하지 않습니다

Answer 1

하지만 유형/D3-MODULE 작품 @, 언급 한 바와 같이이 타이프 라이터 2.0을 필요로하지만. 예를 들어 축이 될 것이기

, 당신이 사용하는 각 D3 모듈의 @types 패키지를 설치합니다 : 나는 이러한에서 온 생각

npm install --save-dev @types/d3-axis 

: Issue 56

: https://github.com/tomwanzek/d3-v4-definitelytyped 각 D3 모듈의 상태/가능 여부 확인

분명히, NPM @types 미래에 typings와 TSD를 대체합니다 : The Future of Declaration Files

Answer 2

을 내가 drewmoore의 suggestiong EIT에 대해 확실하지 않다 그녀. 그것은 나를 위해 일하는 것 같지 않았다.

두 가지 제안을 계속했습니다.

우수 답변

첫 번째는 알로의 대답에 대한 추가 사항입니다. 원래이 주석을 썼을 때, 나는 알로의 답변을 얻을 수 없었습니다. 이제 나는 그 이유를 이해했다. d3 계층 패키지를 사용하려고했습니다.

npm install d3 --save 
npm install @types/d3 --save-dev 
npm install @types/d3-hierarchy --save-dev 

을 그리고 모듈이 방법을 사용하여 : : 그래서 설치

import * as d3 from "d3"; 

d3.hierarchy(blah); 

을 그리고 그것은이 d3.hierarchy 회원에 대해 알고하지 않았다 불평 것입니다. 이제 나는 그 객체를 사용해야 만한다는 것을 이해한다. (내가 전에 등록하지 않은 이유를 모른다.) 그래서, 업데이트 :

import * as d3 from "d3"; 
import * as d3Hierarchy from "d3-hierarchy"; 

d3Hierarchy.hierarchy(blah); 

원래 대답 지금까지 링크에있는 d3-ng2-service 모듈을 사용하고있는 것으로 나타났습니다 유일한 해답이 될 것으로 보인다 무엇

. 훌륭한 스위치는 아니지만 각도 2 프로젝트에서 d3v4를 사용할 수 있습니다.

추가 정보에서 발췌는 각 2 구성 요소에서 사용하는 방법의 아래에서 발견 할 수 있습니다

import { Component, OnInit, ElementRef } from '@angular/core'; 
import { D3Service, D3, Selection } from 'd3-ng2-service'; // <-- import the D3 Service, the type alias for the d3 variable and the Selection interface 

@Component({ 
    selector: 'app-test-d3', 
    templateUrl: 'test-d3.component.html', 
    styleUrls: ['test-d33.component.css'] 
}) 
export class TestD3Component implements OnInit { 

    private d3: D3; // <-- Define the private member which will hold the d3 reference 
    private parentNativeElement: any; 

    constructor(element: ElementRef, d3Service: D3Service) { // <-- pass the D3 Service into the constructor 
    this.d3 = d3Service.getD3(); // <-- obtain the d3 object from the D3 Service 
    this.parentNativeElement = element.nativeElement; 
    } 

    ngOnInit() { 
    let d3 = this.d3; // <-- for convenience use a block scope variable 
    let d3ParentElement: Selection<any, any, any, any>; // <-- Use the Selection interface (very basic here for illustration only) 

// ... 

    if (this.parentNativeElement !== null) { 

     d3ParentElement = d3.select(this.parentNativeElement); // <-- use the D3 select method 

     // Do more D3 things 

    } 
    } 

} 

Answer 3

청소기 코드

에 대한 AMB0027

import * as d3 from "d3"; 
import * as d3Hierarchy from "d3-hierarchy"; 

d3Hierarchy.hierarchy(blah); 

해결 방법에서 답을 기반으로

프로젝트에서 d3-bundle.ts 파일을 만듭니다.

export * from "d3-selection" 
export * from "d3-heirachy" 

d3을 사용하여 - 이제 할 수 있습니다.

import * as d3 from "./d3-bundle" 

d3.hierarchy(blah) 

특히 "scaleLinear"오류

npm install @types/d3-axis 

및

가이 관련된 문제가 주 당신의 D3-bundle.ts에

export * from "d3-axis" 

추가를 방지하려면 유형 스크립트 https://github.com/Microsoft/TypeScript/issues/9681

Answer 4

Arlo의 대답과 관련하여 간략한 역사와 현재의 대답으로 확장하겠습니다. D3 v4가 아직 최종적이지 않고 TypeScript 2가 곧 출시 될 때 새로운 D3 버전 4 TypeScript 정의를 개발하기 위해 repo https://github.com/tomwanzek/d3-v4-definitelytyped을 만들었습니다. 후자는 정의가 쓰여지고 획득 될 수있는 방식, 즉 @ 유형을 변경했기 때문에 주요 요인이었습니다.

repo에 나열된 공동 작업자에게 몇 개의 주목할만한 고개를 끄고 정의를 완료하고이를 DefinitelyTyped으로 마이그레이션했습니다. 그들은 이제 유형 -2.0 지사 (DefinitelyTyped)에서 활발하게 유지되고 있습니다. 그것이 npm @type 인에 게시 된 지점입니다.

당신이 보았을지도 모르던 일부는 개개의 D3 v4 모듈 정의, 예를 들면. d3-selection은 상당 기간 동안 npm install --save @types/d3-selection을 통해 사용할 수있었습니다. 그러나 어제까지 npm install --save @types/d3에 의해 획득 된 정의는 여전히 이전의 D3 v3.5.x 정의를 끌어 냈습니다.

지금 현재로, D3 V4 표준 번들 정의는npm install --save @types/d3 (필요하다면 여전히 3.5 버전을 획득함으로써 @types에서 가져온 할 수 D3의 V3.5의 기존 버전 정의)

에서 사용할 수 있습니다 수입와 정의를 사용에 관해서는 :

• 설치하고 동시에 설치 D3 모듈이 이미 포함 된 반면 (각각 '유형/D3 @' 'D3'와,)에서 D3 표준 번들을 사용하지 마십시오을 그것을 따로 따로, 예를 들면 'd3-hierarchy'및 '@ types/d3-hierarchy'. 에 관해서는

각도 2, 예, D3-NG2 서비스 또는 이와 유사한 갈 하나의 방법입니다.나는 그것이 개선 될 수 있다고 확신한다. 이것은 angular-cli와 함께 신속한 프로토 타이핑을 위해 시작되었다.