本文介绍了安古拉2与D3.js集成实现自定义可视化的方法，分享给大家，具体如下：

目标

展现层与逻辑层分离数据与可视化组件相分离数据与视图双向绑定，实时更新代码结构清晰，易于维护与修改基本原理

angular2的组件生命周期钩子方法父子组件交互机制模板语法

源码解析

代码结构很简单，其中除主页index.html和main.ts之外的代码结构如下所示：

代码结构

app.module.ts

从" @angular/platform-browser "导入{ BrowserModule }；从“@棱角分明/核心”导入{ ng module }；从" @角形/形状"导入{窗体模块}；//来自“”得组件端口{ AppComponent } ./app。组件'；从""导入{泡泡}。/泡泡。组件'；@ ng模块({声明：[AppComponent，Bubbles ]，导入： [ BrowserModule，FormsModule ]，提供程序： []，bootstrap: [AppComponent]})导出类AppModule { }app.component.html

实现宿主视图定义，

2个按钮，按钮可以绑定了2点点击事件，执行相应的动作，刷新数组，同时完成汽泡图的更新；

一个汽泡图子组件，其中价值观念为子组件的输入属性，实现父子组件之间的通信，numArray为汽泡图的输入数据数组，后续为随机生成的数组

氕按钮（点击)='refreshArr()'开始刷新气泡图/button按钮(单击)='stopRefresh()'停止刷新气泡图/button bubbles[values]=' NuMarray '/bubbles/h1 app。组件。分时（同timesharing）

通过指定一个3秒刷新一次的定时器，刷新数据，这里需要注意，需要先清空数组，再添加元素，直接修改数组元素值而不改变引用，则无法刷新汽泡图

从“@棱角分明/核心”导入{组件，OnDestroy，on nit }；@ Component({选择器： ' app-root '，模板Url: ' ./app.component.html '，style URL 3360[]./app.component.css']})导出类AppComponent实现OnInit，on destroy { intervalId=0；numArray=[]；//清除定时器private clearTimer(){控制台。日志('停止刷新');clearInterval(这个。intervalid)；} //生成指定范围内的随机数private getRandom(begin，end){ return math。地板(数学。random()*(end-begin))；} ngOnInit() { for(让我输入这个。{这个。这个。getrandom(0，100000000)；//'0', '1', '2', };} //元素关闭清除定时器ngOnDestroy(){ this。clear timer()；} //启动定时刷新数组refreshArr(){ this。cleartimer()。这个。intervalid=window。setinterval(()={ this。numarray=[]；用于(设I=0；i8；我){这个。努马雷。推(这个。getrandom(0，10000000))；} }, 3000);} //停止定时刷新数组停止刷新(){ this。clear timer()；}}bubbles.component.ts汽泡图组件类

ngOnChanges()生命周期方法，可以在输入属性价值观念发生变化时，自动被调用；@ViewChild可以获取对子元素挽救(保存的简写)的引用，其中#目标自定义变量用于标识挽救(保存的简写)子元素从“@棱角分明/核心”导入{组件，输入，更改，后视图初始化，视图子视图}；从""导入{气泡艺术} ./泡泡。图表'；声明var d3@ Component({选择器： '气泡'，模板： ' SVG #目标宽度=' 900 '高度=' 300 '/SVG '，})导出类气泡实现OnChanges，afterview init { @ Input()值3360 number[]；chart : BubblesChart @ view child(' target ')目标；//获得子组件的引用构造函数(){ } //每当元素对象上绑定的数据输入属性值价值观念发生变化时，执行下列函数，实现图表动态变化ngOnChanges(changes){ if(this。图表){//先清空汽泡图，再重新调用汽泡图对象的提出方法，根据变动后的值绘制图形这个。图表。销毁()；这个。图表。渲染(更改。价值观。current value)；} } ngAfterViewInit() { //初始化汽泡图这个。图表=新的气泡艺术(这。目标。原生元素)；这个。图表。渲染(这个。价值观)；} }泡泡。图表. ts汽泡图类

d3.js语法定义的汽泡图类，自带一个绘制方法和擦除方法需要在index.html当中先引入脚本src=' http://d3js。组织/D3。v2。js '/脚本声明var D3//定义一个气泡图类//导出可视化模块导出类BubblesChart { target : HTMlelement；//构造函数，基于一个超文本标记语言元素对象内部来绘制构造函数(目标： HTMlelement){ this。target=target} //渲染入参为数值完成基于一个数组的汽泡图的绘制render(值： number[]){ console。日志('开始呈现');console.log(值);d3。选择(this.target) //获取旧圆。选择全部("圆")。数据（值)。输入()//对于每个新数据点，在目标挽救（saving的简写）后追加一个圆。追加('圆圈')//将几个样式属性应用到圆圈attr('r '，d=Math.log(d)) //半径attr('fill '，' #5fc') //颜色attr('stroke '，' #333') //轮廓颜色attr('transform '，(d，i)={ //移动位置定义变量偏移量=I * 30 ^ 3 *数学。日志(d)；返回翻译(${offset}，$ { offset })；});}销毁(){ D3。选择(这。目标).选择全部("圆")。移除();}}效果展示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。