Angular2/Typescript + D3v4 - 手動包含類型？

Question

我一直在試圖讓D3和我的Angular2應用程序運行。
但是似乎有當前與新D3v4和可用的分型文件中的問題，即試圖用新的方法，如scaleLinear()，而不是不再可用scale.linear()會導致錯誤
Property 'scaleLinear' does not exist on type 'typeof d3'.
 

由於tomwanzek似乎已經在這個問題上，並試圖在https://github.com/tomwanzek/d3-v4-definitelytyped上創建新的定義，我想知道是否有一種方法可以手動將已經可用的打字文件包含在我的angular2項目中？

Answer 1

我不知道@類型/ d3v4的drewmoore的建議，但@類型/ D3-MODULE作品，雖然這需要打字稿2.0提到。

安裝@types包您使用的每臺D3模塊，例如軸將是：

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

我覺得這些來自：https://github.com/tomwanzek/d3-v4-definitelytyped 檢查每個D3模塊的狀態/可用性：Issue 56

顯然，NPM @types將在未來取代分型和TSD： The Future of Declaration Files

Answer 2

我不知道drewmoore的suggestiong EIT她的。它似乎沒有爲我工作。

我有兩個建議繼續。

最佳答案

首先是增編的Arlo的答案。當我最初寫這篇評論時，我無法得到阿羅的答案。現在我明白了爲什麼。我正在嘗試使用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模塊位於鏈路的唯一答案。這不是一個好的開關，但它確實可以讓你在你的angular 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" 

在ts中使用d3 - 你現在可以做;

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

d3.hierarchy(blah) 

要特別避免 「scaleLinear」 錯誤

npm install @types/d3-axis 

，並添加

export * from "d3-axis" 

到您的D3-bundle.ts

注有與此相關的問題上TypeScript https://github.com/Microsoft/TypeScript/issues/9681

Answer 4

關於Arlo的答案，讓我用一個簡短的歷史和當前的答案展開。我創建了repo https://github.com/tomwanzek/d3-v4-definitelytyped來開發新的D3版本4 TypeScript定義，當D3 v4尚未最終確定時，TypeScript 2即將出現。後者是一個主要因素，因爲它改變了定義的寫法和可獲得的方式，即@types。

在回購協議上列出的合作者點點頭，我們完成了定義並將它們遷移到DefinitelyTyped。他們現在積極維護在DefinitelyTyped的類型 - 2.0分支中。這是發佈到npm @types的分支。

您可能已經看到的一些混淆與單獨的D3 v4模塊定義例如的事實有關。已經有相當一段時間可以通過npm install --save @types/d3-selection獲得d3選擇。然而，直到昨天，npm install --save @types/d3獲得的定義仍然拉低了舊版D3 v3.5.x的定義。

截至目前，D3 V4標準軟件包定義可從npm install --save @types/d3（對於D3 V3.5舊版本的定義仍然可以@types收購了3.5版本被拉如果需要的話）

作爲使用的定義與進口：

• 不要安裝和（「D3」和「@類型/ D3」，分別）使用D3標準捆綁，而在同一時間安裝D3模塊已經包含在它分開，例如'd3-hierarchy'和'@ types/d3-hierarchy'。

至於角2，是的，D3-NG2服務或類似的東西是一條路可走。我確信可以對其進行改進，它開始用於角速度快速原型設計。