D3.js와 통합된 AngularJS2를 사용하여 사용자 정의 시각화를 구현하는 방법

이 글에서는 ANGULAR2와 D3.js를 통합하여 맞춤형 시각화를 이루는 방법을 주로 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 에디터를 따라가 보세요

이 글에서는 ANGULAR2와 D3.js를 통합하여 맞춤형 시각화를 구현하는 방법을 소개합니다. 자세한 내용은 다음과 같습니다.

Goal

1. 분리 프리젠테이션 레이어와 로직 레이어

2. 데이터와 시각화 구성요소가 분리되어 있습니다

3. 데이터와 뷰가 양방향으로 바인딩되어 실시간으로 업데이트됩니다

4. 코드 구조가 명확하고 유지 관리 및 수정이 쉽습니다

기본 원리

angular2의 컴포넌트 라이프 사이클 후크 방식 부모-자식 컴포넌트 상호 작용 메커니즘 템플릿 구문

소스 코드 분석

코드 구조는 홈페이지 index.html과 메인을 제외하면 매우 간단합니다. 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.comComponent.html

는 호스트 뷰 정의,

2개의 버튼을 구현합니다. 버튼은 2개의 클릭 이벤트에 바인딩될 수 있습니다. 해당 작업을 수행하고, 배열을 새로 고치고, 버블 차트 업데이트를 동시에 완료합니다.

1 버블 차트 하위 구성 요소, 여기서 값은 상위 구성 요소와 상위 구성 요소 간의 통신을 실현하는 하위 구성 요소의 입력 속성입니다. 하위 구성 요소인 numArray는 버블 차트의 입력 데이터 배열이고 후속 배열은 무작위로 생성된 배열입니다.

<h1>
 <button (click)="refreshArr()" >开始刷新气泡图</button>
 <button (click)="stopRefresh()" >停止刷新气泡图</button>
 <bubbles [values]="numArray"></bubbles>
</h1>

app.comComponent.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.comComponent.ts 버블 차트 구성 요소 클래스

1. ngOnChanges() 수명 입력 속성 값이 변경될 때 자동으로 호출될 수 있는 사이클 메소드

2. @ViewChild는 #target이 사용자 정의된 하위 요소 svg에 대한 참조를 얻을 수 있습니다. 변수는 svg 하위 요소를 식별하는 데 사용됩니다

import { Component, Input, OnChanges, AfterViewInit, ViewChild} from '@angular/core';
import {BubblesChart} from './bubbles.chart';
declare var d3;
@Component({
  selector: 'bubbles',
  template: &#39;<svg #target width="900" height="300"></svg>&#39;,
})
export class Bubbles implements OnChanges, AfterViewInit {
  @Input() values: number[];
  chart: BubblesChart;
  @ViewChild(&#39;target&#39;) 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. 필요 먼저 c77c83def79ea22a2c6bce5d238453ff2cacc6d41bbb37262a98f745aa00fbf0

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

효과 표시

위 내용은 index.html에서 모든 사람을 위해 편집한 내용입니다. 네, 앞으로 모든 사람에게 도움이 되기를 바랍니다. .

관련 기사:

axios에서 쿠키 크로스 도메인을 구현하는 방법

webpack에는 jquery 플러그인에 대한 환경 구성이 있습니다(자세한 튜토리얼)

Bootstrap4에서 페이징 쿼리를 구현하는 방법 + Vue2

위 내용은 D3.js와 통합된 AngularJS2를 사용하여 사용자 정의 시각화를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!