天天快递网点分布,三国好孩子,女王的总管
本文介绍了angular2 与 d3.js集成实现自定义可视化的方法，分享给大家，具体如下：
目标
基本原理
angular2 的组件生命周期钩子方法\父子组件交互机制\模板语法
源码解析
代码结构很简单，其中除主页和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 汽泡图组件类
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 汽泡图类
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();
}
}
效果展示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Angular8引入百度Echarts进行图表分析的实现代码
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
angular inputNumber指令输入框只能输入数字的实现
网友评论