AngularJS2 與 D3.js集成實現自定義可視化的方法

2019-11-19 14:48:30

字體：大中小

來源：轉載

供稿：網友

本文介紹了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';//componentsimport { 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 汽泡圖組件類

ngOnChanges() 生命周期方法，可以在輸入屬性values發生變化時，自動被調用;
@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 汽泡圖類

d3.js 語法定義的汽泡圖類，自帶一個繪制方法和擦除方法
需要在index.html當中先引入 <script src="http://d3js.org/d3.v2.js"></script>

declare var d3;// define a bubble chart class // Exports the visualization moduleexport 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();  }}

效果展示