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

日期：2020-05-11 栏目：程序人生浏览：次

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

目标

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

基本原理

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

源码解析

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

代码结构

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();
 }
}

转载注明出处：http://www.heiqu.com/587.html

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

相关推荐