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

wangbjun 發(fā)布于2019-08-26 11:48 / 3187人閱讀

摘要：目標(biāo)展現(xiàn)層與邏輯層分離數(shù)據(jù)與可視化組件相分離數(shù)據(jù)與視圖雙向綁定實(shí)時(shí)更新代碼結(jié)構(gòu)清晰易于維護(hù)與修改基本原理的組件生命周期鉤子方法父子組件交互機(jī)制模板語法源碼解析代碼結(jié)構(gòu)很簡(jiǎn)單，其中除主頁和之外的代碼結(jié)構(gòu)如下所示實(shí)現(xiàn)宿主視圖定義，個(gè)按鈕，按鈕

目標(biāo)

展現(xiàn)層與邏輯層分離

數(shù)據(jù)與可視化組件相分離

數(shù)據(jù)與視圖雙向綁定,實(shí)時(shí)更新

代碼結(jié)構(gòu)清晰,易于維護(hù)與修改

基本原理

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

源碼解析

代碼結(jié)構(gòu)很簡(jiǎn)單，其中除主頁index.html和main.ts之外的代碼結(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ù)組

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 汽泡圖組件類

ngOnChanges() 生命周期方法，可以在輸入屬性values發(fā)生變化時(shí)，自動(dòng)被調(diào)用;

@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: "",
})
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 汽泡圖類

d3.js 語法定義的汽泡圖類，自帶一個(gè)繪制方法和擦除方法

需要在index.html當(dāng)中先引入

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

效果展示

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

云服務(wù)器 GPU云服務(wù)器實(shí)現(xiàn)自定義手勢(shì) 自定義如何實(shí)現(xiàn) 自定義布局怎么實(shí)現(xiàn) 自定義view的實(shí)現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107587.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

wangbjun

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

php如何連接云虛擬主機(jī)-該怎么選擇合適自己的云虛擬主機(jī)？

閱讀 3409·2021-09-22 15:01
CSS過渡動(dòng)畫的理解

閱讀 535·2019-08-30 11:11
pug學(xué)習(xí)

閱讀 965·2019-08-29 16:17
通過CSS規(guī)則禁止選中文字

閱讀 1218·2019-08-29 12:23
原生js實(shí)現(xiàn)移動(dòng)端選擇器插件

閱讀 2035·2019-08-26 11:48
ANGULAR2 與 D3.js集成實(shí)現(xiàn)自定義可視化

閱讀 3188·2019-08-26 11:48
react工程化項(xiàng)目配置指南

閱讀 1427·2019-08-26 10:33
Ant Design Pro - 實(shí)踐React Hooks - 頁面

閱讀 1937·2019-08-26 10:30

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

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

相關(guān)文章

**14個(gè)最好的 JavaScript 數(shù)據(jù)可視化庫**

FCC 成都社區(qū)·前端周刊第 5 期

FCC 成都社區(qū)·前端周刊第 5 期

FCC 成都社區(qū)·前端周刊第 5 期

**12個(gè)值得關(guān)注的頂級(jí)可視化JS庫涉及圖表、動(dòng)畫、時(shí)間處理，表格操作**

發(fā)表評(píng)論

0條評(píng)論

wangbjun

男|高級(jí)講師

TA的文章

php如何連接云虛擬主機(jī)-該怎么選擇合適自己的云虛擬主機(jī)？

CSS過渡動(dòng)畫的理解

pug學(xué)習(xí)

通過CSS規(guī)則禁止選中文字

原生js實(shí)現(xiàn)移動(dòng)端選擇器插件