AngularJS2 与 D3.js集成实现自定义可视化的方法

本文介绍了angular2 与 d3.js集成实现自定义可视化的方法，分享给大家，具体如下：

目标

1. 展现层与逻辑层分离
2. 数据与可视化组件相分离
3. 数据与视图双向绑定,实时更新
4. 代码结构清晰,易于维护与修改

基本原理

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 汽泡图组件类

1. ngonchanges() 生命周期方法，可以在输入属性values发生变化时，自动被调用;
2. @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 汽泡图类

1. d3.js 语法定义的汽泡图类，自带一个绘制方法和擦除方法
2. 需要在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();
  }
}

效果展示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。