在angular2中使用插件d3

我想在我的angular 2項目中使用d3-tip。我使用的角CLI在angular2中使用插件d3

在polyfills.ts我加入：

import "d3"; 
import "d3-tip";

在部分我想：

import * as d3 from "d3"; 
... 
private tip = d3.tip().attr('class', 'd3-tip')

，但我有一個錯誤：

__WEBPACK_IMPORTED_MODULE_2_d3__.tip is not a function

我正在安裝@ types/d3和@ types/d3-tip。沒有d3-tip的一切工作。

我不明白爲什麼@ types/d3-tip不起作用。

生成錯誤：

Property 'tip' does not exist on type 'typeof "/node_modules/@types/d3/index"'.

來源

2016-11-29 Illorian

如果找不到您想要的解決方案;我的建議是創建一個自定義定義（d.ts）文件，然後聲明一個d3模塊並在其中放置一個提示函數。 – echonax

@echonax我認爲問題不在d.ts.當我調試時，我發現在D3中沒有提示字段 – Illorian

是的，因爲提示帶有另一個庫。 'd3'默認沒有'tip'功能。檢查：http：//bl.ocks.org/Caged/6476579你可以看到它正在導入d3後 – echonax

我不熟悉的D3，但是我已經和火力點一個相同的問題。

麻煩的事實開始的firebase.js文件不聲明它的命名空間的變量firebase（或這將是你的情況d3全局變量）爲包含方法的對象，而只是說：var firebase=null;然後繼續在幾個內部函數調用中構建它的內容，這些調用是在瀏覽器導入和執行文件時發生的。

當它通過angular-cli構建時，它會轉換爲不同的結構，其錯誤消息__WEBPACK_IMPORTED_MODULE_2_d3__.tip ....中可以看到其中的痕跡，並且由於構建過程不首先執行.js文件，只有它能夠看到，這是一個var firebase=null;和var d3=null;你的情況，如果我是對的。

這是問題的原因。可悲的是我沒有簡單的解決方案，在我的情況下，我可以解決它，因爲firebase API通過調用initializeApp()（全局和firebase.anything空間以外）進行初始化，並且它返回一個對象，該對象提供幾乎所有需要使用的對象圖書館，所以我可以通過這個對象做事情，並避免完全調用firebase.stuff。

一種方式可能會爲你工作，相反卻是很難在將來的維護方面，就是要尋找到D3變量在一個.js文件中聲明和修改聲明，以便它包含一個對象的方法和屬性，您要使用的名稱，例如

var d3 = { 
    tip: function(); 
    ..... 
}

它並不需要有什麼，但結構那裏，像一個.d.ts文件 - 只是這樣，那的WebPack建設者會認爲這不是一個空變量，而是一個對象。正如我上面所描述的那樣，將它鏈接到.d.ts並找出對象的結構並不夠聰明 - 它僅僅需要它在.js文件中聲明的內容。

這可能需要您手動添加對庫執行的任何代碼的調用，以初始化d3 var，最好在某個組件的ngOnInit()方法中，但也可能在沒有它的情況下運行。

編輯：在此期間，「腳本」：[]在angular-cli.json中得到了修復，它解決了這個問題。由於某種原因，它以前並不奏效，但是使用了angular-cli-beta。25加入我的firebase.js解決了這個問題。

來源

2016-11-29 10:07:33

在angular2中使用插件d3

回答

相關問題