在angular2中使用d3的插件

时间:2016-11-29 08:28:20

标签: angular d3.js

我想在我的角度2项目中使用d3-tip。我使用的是angular-cli

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

1 个答案:

答案 0 :(得分:1)

我不熟悉d3,但我遇到了与firebase相同的问题。

问题始于firebase.js文件没有声明它的命名空间变量firebase(或者你的情况下d3全局var)作为一个包含方法的对象,而只是说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空间之外并且它返回一个对象它提供了使用库所需的几乎所有内容,因此我可以通过此对象执行操作,并完全避免调用var d3 = { tip: function(); ..... }

可能为你工作的一种方式,但在未来的维护方面相当困难,是找到在.js文件中声明d3变量的位置并修改声明,以便它是一个对象,包含您要使用的方法和属性的名称,例如

d3

除了那里的结构之外,它不需要任何东西,比如.d.ts文件 - 只是这样,webpack构建器会发现这不是一个空变量,而是一个对象。如上所述,将它链接到.d.ts并找出对象的结构是不够智能的 - 它只需要在.js文件中声明它所看到的内容。

这可能需要您手动添加对库执行的任何代码的调用,以初始化ngOnInit() var,最好是在某些组件的pause方法中,但它可能也可以在没有它的情况下工作

编辑:在此期间"在angular-cli.json中的脚本":[]得到修复并解决了这个问题。由于某种原因它之前没有工作,但使用angular-cli-beta.25添加我的firebase.js解决了这个问题。