本文介绍了ANGULAR2 与 D3.js集成实现自定义可视化的方法，分享给大家，具体如下：
目标
基本原理
angular2 的组件生命周期钩子方法\父子组件交互机制\模板语法
源码解析
代码结构很简单，其中除主页index.html和main.ts之外的代码结构如下所示:
代码结构
app.module.ts
@NgModule({
declarations: [
AppComponent,Bubbles
],imports: [
BrowserModule,FormsModule
],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }
declarations: [
AppComponent,Bubbles
],imports: [
BrowserModule,FormsModule
],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
实现宿主视图定义，
2个按钮，按钮可以绑定了2点点击事件，执行相应的动作，刷新数组，同时完成汽泡图的更新；
1个汽泡图子组件,其中values为子组件的输入属性，实现父子组件之间的通信，numArray为汽泡图的输入数据数组，后续为随机生成的数组
app.component.ts
通过指定一个3秒刷新一次的定时器，刷新数据，这里需要注意，需要先清空数组，再添加元素，直接修改数组元素值而不改变引用，则无法刷新汽泡图
{
this.numArray = [];
for (let i=0;i<8;i++)
{
this.numArray.push(this.getRandom(0,100000000));
}
},3000);
}
// 停止定时刷新数组
stopRefresh() {
this.clearTimer();
}
}
bubbles.component.ts 汽泡图组件类
',})
export class Bubbles implements OnChanges,AfterViewInit {
@Input() values: number[];
chart: BubblesChart;
@ViewChild('target') target;//获得子组件的引用
constructor() {
}
// 每当元素对象上绑定的数据 输入属性值 values 发生变化时，执行下列函数，实现图表动态变化
ngOnChanges(changes) {
if (this.chart) {
// 先清空汽泡图，再重新调用汽泡图对象的render方法，根据变动后的值绘制图形
this.chart.destroy();
this.chart.render(changes.values.currentValue);
}
}
ngAfterViewInit() {
// 初始化汽泡图
this.chart = new BubblesChart(this.target.nativeElement);
this.chart.render(this.values);
}
}
bubbles.chart.ts 汽泡图类
