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

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

效果展現

（參考文章：https://www.ibm.com/developer...）