Javascript 如何在Angular2中导入d3pie.js类型脚本定义

我想在我的

Angular2

项目中使用

d3pie.js

库，但不知道如何使用它的类型脚本定义导入它

我使用以下命令安装了

d3

，

d3pie.js

：

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

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

然而，当我像往常一样尝试导入@types定义时

import * as d3pie from 'd3pie';

我得到一个错误：

File '~/foobar/node_modules/@types/d3pie/index.d.ts' in not a module.

通过一个简单的导入，如：

import 'd3pie';

我在应用程序的开发控制台中遇到此错误：

ERROR Error: Uncaught (in promise): ReferenceError: d3pie is not defined

这是我的component.ts文件的内容，模板有

test

div

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：“应用程序饼图”，
templateUrl:'./pie chart.component.html'，
样式URL:['./饼图.component.scss']
})
导出类PieChartComponent实现OnInit{
构造函数（）{
}
恩戈尼尼特（）{
声明：任何；
这个.testDraw（）；
}
公共测试绘图（）{
常数图=新的d3pie（'测试'，
{
标题：{
标题：{
文本：“”，
颜色：'#333333'，
尺码：18，
字体：“arial”
},
副标题:{
颜色：“#666666”，
尺寸：14，
字体：“arial”
},
位置：'上止点'，
标题子标题添加：8
},
页脚：{
文本：“”，
颜色：“#666666”，
尺寸：14，
字体：“arial”，
位置：'左'
},
尺寸：{
画布高度：500，
画布宽度：500，
半径：0，
pieOuterRadius:空
},
数据：{
巫师：“没有”，
小型分组：{
启用：false，
价值：1，
valueType:'百分比'，
标签：‘其他’，
颜色：“#中交”
},
内容：[]
},
标签：{
外部：{
格式：“标签”，
hideWhenLessThanPercentage:null，
距离：30
},
内部：{
格式：'百分比'，
hideWhenLessThanPercentage:空
},
主标签：{
颜色：'#333333'，
字体：“arial”，
字体大小：10
},
百分比：{
颜色：'#dddddd'，
字体：“arial”，
尺寸：10，
小数位数：0
},
价值：{
颜色：“#cccc44”，
字体：“arial”，
字体大小：10
},
线路：{
启用：对，
风格：'曲线'，
颜色：“段”/“段”或十六进制颜色
}
},
影响：{
负载：{
效果：“默认值”，//无/默认值
速度：1000
},
pullOutSegmentOnClick：{
效果：“反弹”，//无/线性/反弹/弹性/返回
速度:300,，
尺码：10
},
highlightSegmentOnMouseover:是的，
强光亮度：-0.2
},
工具提示：{
启用：false，
键入：'占位符'，//标题|占位符
字符串：“”，
占位符分析器：null，
风格：{
fadeInSpeed:250，
背景颜色：'#000000'，
背景不透明度：0.5，
颜色：“#efefef”，
边界半径：2，
字体：“arial”，
尺寸：10，
填充：4
}
},
杂项：{
颜色：{
背景：null，//透明
部分：[
"2484c1","65a620","7b6888","a05d56","961a1a",，
"d8d23a","e98125","d0743c","635222","6ada6a",，
"0c6197","7d9058","207f33","44b9b0","bca44a",，
"e4a14b","a3acb2","8cc3e9","69a6f9","5b388f",，
"546e91","8bde95","d2ab58","273c71","98bf6e",，
"4daa4b","98abc5","cc1010","31383b","006391",，
"c2643f","b0a474","a5a39c","a9c2bc","22af8c",，
"7fcecf","987ac6","3d3b87","b77b1c","c9c2b6",，
"807ece","8db27c","be66a2","9ed3c6","00644b",，
‘005064’、‘77979f’、‘77e079’、‘9c73ab’、‘1f79a7’
],
分段笔划：'#ffffff'
},
坡度：{
启用：false，
百分比：95，
颜色：'#000000'
},
拉票：{
前五名，
右:5,，
底部：5，
左：5
},
分段偏移：{
x:0,，
y:0
},
cssPrefix:null
},
回调：{
onload:null，
onMouseoverSegment:null，
onMouseoutSegment:null，
onclick段：空
}
});
}
}

---

谢谢大家!

如果使用angular CLI，可以执行以下操作：

添加到

angular cli.json

"scripts": ["./node_modules/d3pie/d3pie/d3pie.min.js",]

然后将其添加到您的

打字.d.ts

 declare var d3pie:any;

---

使用以下命令安装d3、d3pie.js：

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

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

请不要认为

npm

中的d3pie包过时了（因为它仍然使用D3V3）

更喜欢来自的最新版本

使用编辑

.angular cli.json

"scripts": [
        "../node_modules/d3/build/d3.js",
        "../node_modules/d3pie/d3pie/d3pie.js"
],

在您的组件内部，导入

import 'd3pie'

---

利润

或者，作为临时修复，您可以删除打字方式和scrifice Linting，并使用{declare var d3pie:any；}和指向CDN或节点模块本地文件的脚本链接。我在哪里添加此声明？我还需要导入d3吗？使用component.ts文件中的声明，在其中使用库和index.htmlI get

修饰符不能出现在此处

错误。我用所做的更改更新了帖子。我添加了脚本行，打字工作正常。我还为d3添加了一行脚本。然而，

d3pie<