ANGULAR2 与 D3.js集成实现自定义可视化

wangbjun 发布于2019-08-26 11:48 / 3064人阅读

摘要：目标展现层与逻辑层分离数据与可视化组件相分离数据与视图双向绑定实时更新代码结构清晰易于维护与修改基本原理的组件生命周期钩子方法父子组件交互机制模板语法源码解析代码结构很简单，其中除主页和之外的代码结构如下所示实现宿主视图定义，个按钮，按钮

目标

展现层与逻辑层分离

数据与可视化组件相分离

数据与视图双向绑定,实时更新

代码结构清晰,易于维护与修改

基本原理

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

专线服务服务器托管实现自定义手势自定义如何实现自定义布局怎么实现自定义view的实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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