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


Posted in Javascript onDecember 01, 2017

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

目标

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

基本原理

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

源码解析

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

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

代码结构

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
//components
import { AppComponent } from './app.component';
import { Bubbles } from './bubbles.component';

@NgModule({
 declarations: [
  AppComponent,
  Bubbles
 ],
 imports: [
  BrowserModule,
  FormsModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

实现宿主视图定义,

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

1个汽泡图子组件,其中values为子组件的输入属性,实现父子组件之间的通信,numArray为汽泡图的输入数据数组,后续为随机生成的数组

<h1>
 <button (click)="refreshArr()" >开始刷新气泡图</button>
 <button (click)="stopRefresh()" >停止刷新气泡图</button>
 <bubbles [values]="numArray"></bubbles>
</h1>

app.component.ts

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

import { Component, OnDestroy, OnInit } from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
 intervalId = 0;
 numArray = [];
 // 清除定时器
 private clearTimer() {
  console.log('stop refreshing');
  clearInterval(this.intervalId);
 }
 // 生成指定范围内的随机数
 private getRandom(begin, end) {
  return Math.floor(Math.random() * (end - begin));
 }
 ngOnInit() {
  for (let i in this.numArray) {
   this.numArray[i] = this.getRandom(0, 100000000); // "0", "1", "2",
  };
 }
 // 元素关闭清除定时器
 ngOnDestroy() { this.clearTimer(); }
 // 启动定时刷新数组
 refreshArr() {
  this.clearTimer()
  this.intervalId = window.setInterval(() => {
   this.numArray = [];
   for (let i=0;i<8;i++)
   {
    this.numArray.push(this.getRandom(0, 100000000));
   }
  }, 3000);
 }
 // 停止定时刷新数组
 stopRefresh() {
  this.clearTimer();
 }
}

bubbles.component.ts 汽泡图组件类

  1. ngOnChanges() 生命周期方法,可以在输入属性values发生变化时,自动被调用;
  2. @ViewChild 可以获取对子元素svg的引用,其中#target自定义变量用于标识svg子元素
import { Component, Input, OnChanges, AfterViewInit, ViewChild} from '@angular/core';
import {BubblesChart} from './bubbles.chart';
declare var d3;
@Component({
  selector: 'bubbles',
  template: '<svg #target width="900" height="300"></svg>',
})
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 汽泡图类

  1. d3.js 语法定义的汽泡图类,自带一个绘制方法和擦除方法
  2. 需要在index.html当中先引入 <script src="//d3js.org/d3.v2.js"></script>
declare var d3;
// define a bubble chart class 
// Exports the visualization module
export class BubblesChart {
  target: HTMLElement;
  //构造函数, 基于一个 HTML元素对象内部来绘制
  constructor(target: HTMLElement) {
    this.target = target;
  }
  // 渲染 入参为数值 完成基于一个数组的 汽泡图的绘制
  render(values: number[]) {
    console.log('start rendering');
    console.log(values);
    d3.select(this.target)
      // Get the old circles
      .selectAll('circle')
      .data(values)
      .enter()
      // For each new data point, append a circle to the target SVG
      .append('circle')
      // Apply several style attributes to the circle
      .attr('r', d => Math.log(d)) // 半径
      .attr('fill', '#5fc') // 颜色
      .attr('stroke', '#333') // 轮廓颜色
      .attr('transform', (d, i) => { // 移动位置
        var offset = i * 30 + 3 * Math.log(d);
        return `translate(${offset}, ${offset})`;
      });
  }

  destroy() {
    d3.select(this.target).selectAll('circle').remove();
  }
}

效果展示

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
原生JS进行前后端同构
Apr 22 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
微信小程序实现可长按移动控件
Nov 01 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 Javascript
javascript Function函数理解与实战
Dec 01 #Javascript
React Native react-navigation 导航使用详解
Dec 01 #Javascript
分析JS单线程异步io回调的特性
Dec 01 #Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 #Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 #Javascript
利用babel将es6语法转es5的简单示例
Dec 01 #Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 #Javascript
You might like
javascript 小型动画组件与实现代码
2010/06/02 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
jQuery入门介绍之基础知识
2015/01/13 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
python爬虫之百度API调用方法
2017/06/11 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
Python实现不规则图形填充的思路
2020/02/02 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
毕业生造价工程师求职信
2013/10/17 职场文书
个人生活学习自我评价范文
2013/11/26 职场文书
公司年会主持词
2014/03/22 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
党员心得体会范文2016
2016/01/23 职场文书
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技