ANGULAR2 與 D3.js集成實現自定義可視化

wangbjun 發布于2019-08-26 11:48 / 3175人閱讀

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

目標

展現層與邏輯層分離

數據與可視化組件相分離

數據與視圖雙向綁定,實時更新

代碼結構清晰,易于維護與修改

基本原理

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為汽泡圖的輸入數據數組，后續為隨機生成的數組

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: "",
})
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當中先引入

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...）

GPU云服務器云服務器實現自定義手勢自定義如何實現自定義布局怎么實現自定義view的實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107587.html

14個最好的 JavaScript 數據可視化庫

摘要：適用于，演示這是開發的一個簡單的可視化庫，它允許你創建所有常用的圖表類型條形圖，樹形圖，折線圖，面積圖等。可以輕松地對折線圖和條形圖進行混合和匹配以組合不同的數據集，這是非常棒的功能。翻譯：瘋狂的技術宅原文：https://www.monterail.com/blo... 本文首發微信公眾號：jingchengyideng歡迎關注，每天都給你推送新鮮的前端技術文章你的程序有多...

Mertens 2019-08-23 16:23 評論0 收藏0
FCC 成都社區·前端周刊第 5 期

摘要：發布一直是數據可視化的不錯選擇。本次發布的版本的更新包括使用代替回調函數，等高線圖和密度圖。詳情發布該版本更新包括模塊調整，模塊新增函數判斷終端是否支持顏色，棄用函數和等。 01. D3.js 5.0 發布 D3 一直是 JavaScript 數據可視化的不錯選擇。本次發布的 5.0 版本的更新包括：使用 Promise 代替回調函數，等高線圖和密度圖。詳情：https://gith...

mengera88 2019-08-30 14:20 評論0 收藏0
FCC 成都社區·前端周刊第 5 期

摘要：發布一直是數據可視化的不錯選擇。本次發布的版本的更新包括使用代替回調函數，等高線圖和密度圖。詳情發布該版本更新包括模塊調整，模塊新增函數判斷終端是否支持顏色，棄用函數和等。 01. D3.js 5.0 發布 D3 一直是 JavaScript 數據可視化的不錯選擇。本次發布的 5.0 版本的更新包括：使用 Promise 代替回調函數，等高線圖和密度圖。詳情：https://gith...

Jinkey 2019-08-22 15:56 評論0 收藏0
FCC 成都社區·前端周刊第 5 期

摘要：發布一直是數據可視化的不錯選擇。本次發布的版本的更新包括使用代替回調函數，等高線圖和密度圖。詳情發布該版本更新包括模塊調整，模塊新增函數判斷終端是否支持顏色，棄用函數和等。 01. D3.js 5.0 發布 D3 一直是 JavaScript 數據可視化的不錯選擇。本次發布的 5.0 版本的更新包括：使用 Promise 代替回調函數，等高線圖和密度圖。詳情：https://gith...

張金寶 2019-08-02 10:05 評論0 收藏0
12個值得關注的頂級可視化JS庫涉及圖表、動畫、時間處理，表格操作

摘要：本文是譯文，原文是我在原文的基礎上加了百度的圖表庫，這個也是毫不遜色其他圖表庫的。更新記錄圖表類數據驅動文檔通常被稱為最強大的開源可視化庫。是迄今為止最好的圖表庫。在頂級功能支持，使任何元素可拖動，可旋轉或可滑動滾動和快速性能的能力。本文是譯文，原文是https://da-14.com/blog/top-11...我在原文的基礎上加了百度的Echats圖表庫，這個也是毫不遜色其他圖表...

JinB 2019-08-20 14:14 評論0 收藏0