次のリンクからコードをダウンロードしました
https://medium.com/netscape/visualizing-data-with-angular-and-d3-209dde784aeb
からテーマをダウンロードしました
https://github.com/akveo/ngx-admin
angular v6を使用して、両方を単一のプロジェクトに統合することができました。ここで、新しいコンポーネントを作成し、中規模サイトのグラフ コンポーネントを使用しました。M または F を示す「性別」としてノードにプロパティを追加しました。これで、画面の右側にパネルが表示されます。男性チェック ボックスをクリックすると、性別 M のノードが強調表示され、F を選択すると女性が強調表示されます。チェックボックスの選択を解除するには、ノードを反転させます。
ダッシュボード Component.ts :
import { AppConfigService } from './../../services/load-config.service';
import { Globals } from './../../globals';
import { Component, Input, Output, EventEmitter, ChangeDetectorRef, HostListener, ChangeDetectionStrategy, OnInit, AfterViewInit } from '@angular/core';
import APP_CONFIG from './../../app.config';
import { GraphComponent } from './../../visuals/graph/graph.component';
import { D3Service, ForceDirectedGraph, Node, Link } from '../../d3';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector: 'ngx-genome',
styleUrls: ['./genome-dashboard.component.scss'],
templateUrl: './genome-dashboard.component.html',
})
export class GenomeDashboardComponent {
@Input() nodes: Node[] = [];
@Input() links: Link[] = [];
closed: boolean = false;
graph: ForceDirectedGraph;
private countdownEndRef: Subscription = null;
public options: { width, height } = { width: 800, height: 600 };
male: boolean=false;
female: boolean=false;
constructor(
private d3Service: D3Service,
private globalService: Globals,
private cd: ChangeDetectorRef
) {
debugger;
console.log("constructor genome-dashboard.component");
console.log(this.nodes);
}
onChange() {
for (let i = 0; i < this.nodes.length; i++) {
if(this.graph.nodes[i].gender === "M" && this.male) {
this.graph.nodes[i].opacity = '0.2';
console.log(" opacity = 0.2 for " + this.graph.nodes[i].gender);
} else if(this.graph.nodes[i].gender === "M" && !this.male) {
this.graph.nodes[i].opacity = 1;
console.log(" opacity = 1 for " + this.graph.nodes[i].gender);
}
if(this.graph.nodes[i].gender === "F" && this.female) {
this.graph.nodes[i].opacity = '0.2';
console.log(" opacity = 0.2 for " + this.nodes[i].gender);
} else if(this.graph.nodes[i].gender === "F" && !this.female) {
this.graph.nodes[i].opacity = '1';
console.log(" opacity = 1 for " + this.graph.nodes[i].gender);
}
}
}
ngOnInit(): void {
//Called after the constructor, initializing input properties, and the first call to ngOnChanges.
//Add 'implements OnInit' to the class.
console.log("ngOninit genome-dashboard.component");
this.graph = this.d3Service.getForceDirectedGraph(this.nodes, this.links, this.options);
}
}
ダッシュボード Component.html
<div class="rightBar">
<div class="zoomControl">Zoom Control here</div>
<div class="settingBar">Settings here
<div class="row" style="padding-left: 17px">
<div><nb-checkbox [(ngModel)]="female" (change)="onChange()">Female</nb-checkbox></div>
<div><nb-checkbox [(ngModel)]="male" (change)="onChange()">Male</nb-checkbox></div>
</div>
</div>
</div>
<graph class="dashGraph" [nodes]="nodes" [links]="links" ></graph>
ダッシュボード コンポーネント.scss
@import '../../@theme/styles/themes';
@include nb-for-theme(cosmic);
.rightBar {
z-index: 1000;
position: absolute;
top: 0px;
right: 1%;
padding: 0px 10px 0px 10px;
display: block;
width: 200px;
height: 400px;
background-color: transparent;
}
.rightBar .zoomControl {
font-weight: bold;
}
.rightBar .settingBar {
display:block;
padding: 10px;
margin: 20px 0px 0px 0px;
width: 190px;
height: 300px;
//background-color: #3D3780;
// @include nb-for-theme(cosmic) {
// background-color : nb-theme(switcher-background);
// }
background-color : nb-theme(switcher-background);
border: 1px solid #A19BE7;
border-right: 0px;
border-radius: 8px 0px 0px 8px;
}
#graphSVG {
width: 800px;
text-align: left;
}
現在、時々動作しますが、一貫性がありません。多分私は何かが欠けています。どうすればこれを理解できますか？