位置: 编程技术 - 正文
推荐整理分享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>效果展示
标签: AngularJS2 与 D3.js集成实现自定义可视化的方法
本文链接地址:https://www.jiuchutong.com/biancheng/378948.html 转载请保留说明!上一篇:浅谈angular4实际项目搭建总结(angularjs4)
友情链接: 武汉网站建设