溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

AngularJS2 與 D3.js集成實(shí)現(xiàn)自定義可視化的方法

發(fā)布時(shí)間：2020-09-22 07:49:56 來源：腳本之家 閱讀：186 作者：dudubird85 欄目：web開發(fā)

本文介紹了ANGULAR2 與 D3.js集成實(shí)現(xiàn)自定義可視化的方法，分享給大家，具體如下：

目標(biāo)

  1. 展現(xiàn)層與邏輯層分離
  2. 數(shù)據(jù)與可視化組件相分離
  3. 數(shù)據(jù)與視圖雙向綁定,實(shí)時(shí)更新
  4. 代碼結(jié)構(gòu)清晰,易于維護(hù)與修改

基本原理

angular2 的組件生命周期鉤子方法\父子組件交互機(jī)制\模板語(yǔ)法

源碼解析

代碼結(jié)構(gòu)很簡(jiǎn)單，其中除主頁(yè)index.html和main.ts之外的代碼結(jié)構(gòu)如下所示:

AngularJS2 與 D3.js集成實(shí)現(xiàn)自定義可視化的方法

代碼結(jié)構(gòu)

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

實(shí)現(xiàn)宿主視圖定義，

2個(gè)按鈕，按鈕可以綁定了2點(diǎn)點(diǎn)擊事件，執(zhí)行相應(yīng)的動(dòng)作，刷新數(shù)組，同時(shí)完成汽泡圖的更新；

1個(gè)汽泡圖子組件,其中values為子組件的輸入屬性，實(shí)現(xiàn)父子組件之間的通信，numArray為汽泡圖的輸入數(shù)據(jù)數(shù)組，后續(xù)為隨機(jī)生成的數(shù)組

<h2>
 <button (click)="refreshArr()" >開始刷新氣泡圖</button>
 <button (click)="stopRefresh()" >停止刷新氣泡圖</button>
 <bubbles [values]="numArray"></bubbles>
</h2>

app.component.ts

通過指定一個(gè)3秒刷新一次的定時(shí)器，刷新數(shù)據(jù)，這里需要注意，需要先清空數(shù)組，再添加元素，直接修改數(shù)組元素值而不改變引用，則無法刷新汽泡圖

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 = [];
 // 清除定時(shí)器
 private clearTimer() {
  console.log('stop refreshing');
  clearInterval(this.intervalId);
 }
 // 生成指定范圍內(nèi)的隨機(jī)數(shù)
 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",
  };
 }
 // 元素關(guān)閉清除定時(shí)器
 ngOnDestroy() { this.clearTimer(); }
 // 啟動(dòng)定時(shí)刷新數(shù)組
 refreshArr() {
  this.clearTimer()
  this.intervalId = window.setInterval(() => {
   this.numArray = [];
   for (let i=0;i<8;i++)
   {
    this.numArray.push(this.getRandom(0, 100000000));
   }
  }, 3000);
 }
 // 停止定時(shí)刷新數(shù)組
 stopRefresh() {
  this.clearTimer();
 }
}

bubbles.component.ts 汽泡圖組件類

  1. ngOnChanges() 生命周期方法，可以在輸入屬性values發(fā)生變化時(shí)，自動(dòng)被調(diào)用;
  2. @ViewChild 可以獲取對(duì)子元素svg的引用，其中#target自定義變量用于標(biāo)識(shí)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() {
  }
  // 每當(dāng)元素對(duì)象上綁定的數(shù)據(jù) 輸入屬性值 values 發(fā)生變化時(shí)，執(zhí)行下列函數(shù)，實(shí)現(xiàn)圖表動(dòng)態(tài)變化
  ngOnChanges(changes) {
    if (this.chart) {
      // 先清空汽泡圖，再重新調(diào)用汽泡圖對(duì)象的render方法，根據(jù)變動(dòng)后的值繪制圖形
      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 語(yǔ)法定義的汽泡圖類，自帶一個(gè)繪制方法和擦除方法
  2. 需要在index.html當(dāng)中先引入 <script src="http://d3js.org/d3.v2.js"></script>
declare var d3;
// define a bubble chart class 
// Exports the visualization module
export class BubblesChart {
  target: HTMLElement;
  //構(gòu)造函數(shù)， 基于一個(gè) HTML元素對(duì)象內(nèi)部來繪制
  constructor(target: HTMLElement) {
    this.target = target;
  }
  // 渲染 入?yún)閿?shù)值 完成基于一個(gè)數(shù)組的 汽泡圖的繪制
  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) => { // 移動(dòng)位置
        var offset = i * 30 + 3 * Math.log(d);
        return `translate(${offset}, ${offset})`;
      });
  }

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

效果展示

AngularJS2 與 D3.js集成實(shí)現(xiàn)自定義可視化的方法

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手