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 相关文章推荐
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
js命名空间写法示例
Dec 18 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 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
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
Javascript Global对象
2009/08/13 Javascript
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
python实现自动重启本程序的方法
2015/07/09 Python
Django的信号机制详解
2017/05/05 Python
python实现求最长回文子串长度
2018/01/22 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
Python之多进程与多线程的使用
2021/02/23 Python
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
项目总经理岗位职责
2014/02/14 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
开服装店计划书
2014/08/15 职场文书
门店店长岗位职责
2015/04/14 职场文书
2015国庆节感想
2015/08/04 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP