位置: 编程技术 - 正文

AngularJS2 与 D3.js集成实现自定义可视化的方法

编辑:rootadmin

推荐整理分享AngularJS2 与 D3.js集成实现自定义可视化的方法,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

本文介绍了ANGULAR2 与 D3.js集成实现自定义可视化的方法,分享给大家,具体如下:

目标

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

基本原理

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

源码解析

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

代码结构

AngularJS2 与 D3.js集成实现自定义可视化的方法

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)

下一篇:Vue-Access-Control 前端用户权限控制解决方案

  • 公司购买二手房可以开增值税专用发票吗
  • 应税消费品是什么意思
  • 公司的货款直接到账吗
  • 净资产是资产负债表的哪一项
  • 增值税发票认证平台
  • 审计调整分录汇总的内容
  • 用友财务软件怎么设置二级科目
  • 职工教育经费中其他费用包括
  • 银行贷款减值准备转回处理
  • 公转私可以实时到账吗
  • 公司接受投资会计科目
  • 经营杠杆系数分类
  • 小规模纳税人税控盘怎么做账
  • 房地产企业的收入信息披露范围进一步扩大
  • 计提工资会计科目怎么写
  • 同一套房
  • 7月认证的发票7月可以抵扣吗?
  • 电子税票号码是那个
  • 长期待摊费用要设明细科目吗
  • 企业法人和股份的关系
  • 土地增值税成本扣除项目
  • 销售折扣账务怎么处理
  • 没有生产产品,费用怎么结转
  • 小规模纳税人销售收入会计分录
  • 环评费用计入哪个会计科目
  • 往年个税申报数据查询
  • 其他资本公积增加会计处理方法
  • 企业所得税如何计算
  • 上海个人所得税计算器
  • linux系统的
  • 360压缩怎么压缩到指定大小
  • 收到采购发票未开票
  • 克罗地亚佩列沙茨
  • win11如何将开始菜单里的软件移到桌面
  • 以房产投资联营,收取固定收入,不承担联营风险的房产
  • 上年度成本费用包括哪些
  • 买支票需要带什么章
  • 多对账工作的主要内容
  • 北极熊睡觉图片卡通
  • 纳税人性质是什么
  • thinkphp yii
  • 服务器连接方式包括直接相连,间接连接
  • 使用灭火器时要对准火焰的什么部位喷射
  • python统计字符串长度
  • dedecms更新
  • phpcms怎么用
  • 人力资源公司代办
  • 企业的管理费用占比
  • 出租车手撕票可以税前扣除吗
  • 资产负债表季报是累计三个月数据吗
  • 防暑降温用品进口品牌
  • 劳务报酬是自行缴纳吗
  • 减免申报明细表怎么填
  • 进项税额已经抵扣是什么意思
  • 当年发生亏损会影响所有者权益吗
  • 股权投资所得是什么
  • 摊销无形资产10000元
  • 企业所得税季报是填累计数吗
  • 加计减免其他收入怎么填
  • 小规模纳税人的金税盘可以抵税吗
  • 一般纳税人增值税减免政策2023
  • 公司从员工工资扣水电费
  • 采购返利是什么意思
  • 总产值的计算方法是什么
  • mysqldump备份数据库不完整
  • win10 rs5
  • ubuntu系统怎么用
  • ubuntu系统如何安装qq
  • centos安装后配置
  • appservicesdkscripterror
  • 如何调整windows桌面图标大小
  • dmidecode 硬盘
  • linuxwho
  • shell 批量执行命令
  • 结合mint-ui移动端下拉加载实践方法总结
  • c语言 ls
  • 深圳国税电子税务局网上办税服务厅
  • 非涉密网络严禁什么
  • 江苏国税电子税务局网登录
  • 异地预缴增值税销售额是含税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设