位置: 编程技术 - 正文
AngularJS2 与 D3.js集成实现自定义可视化的方法
编辑：rootadmin推荐整理分享AngularJS2 与 D3.js集成实现自定义可视化的方法，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
本文介绍了ANGULAR2 与 D3.js集成实现自定义可视化的方法，分享给大家，具体如下：
目标
展现层与逻辑层分离 数据与可视化组件相分离 数据与视图双向绑定,实时更新 代码结构清晰,易于维护与修改基本原理
angular2 的组件生命周期钩子方法父子组件交互机制模板语法
源码解析
代码结构很简单，其中除主页index.html和main.ts之外的代码结构如下所示:
代码结构
app.module.ts
app.component.html
实现宿主视图定义，
2个按钮，按钮可以绑定了2点点击事件，执行相应的动作，刷新数组，同时完成汽泡图的更新；
1个汽泡图子组件,其中values为子组件的输入属性，实现父子组件之间的通信，numArray为汽泡图的输入数据数组，后续为随机生成的数组
app.component.ts
通过指定一个3秒刷新一次的定时器，刷新数据，这里需要注意，需要先清空数组，再添加元素，直接修改数组元素值而不改变引用，则无法刷新汽泡图
bubbles.component.ts 汽泡图组件类
ngOnChanges() 生命周期方法，可以在输入属性values发生变化时，自动被调用; @ViewChild 可以获取对子元素svg的引用，其中#target自定义变量用于标识svg子元素bubbles.chart.ts 汽泡图类
d3.js 语法定义的汽泡图类，自带一个绘制方法和擦除方法 需要在index.html当中先引入 <script src="//d3js.org/d3.v2.js"></script>效果展示
上一篇：浅谈angular4实际项目搭建总结(angularjs4)
下一篇：Vue-Access-Control 前端用户权限控制解决方案