我从以下链接下载了代码
https://medium.com/netscape/visualizing-data-with-angular-and-d3-209dde784aeb
我从
下载了主题https://github.com/akveo/ngx-admin
我设法使用angular v6将两者集成到单个项目中。现在,我从中型站点创建了新组件并使用了图形组件。我已将属性添加为节点,显示为“ gender”,显示M或F。现在,我在屏幕右侧有一个面板,如果单击Male复选框,则性别为M的节点应突出显示,如果选择F然后突出显示Female节点,然后反向以取消选中复选框。
仪表板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>
仪表板Component.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;
}
当前,有时它可以工作,但是并不一致。也许我缺少了一些东西。我该如何解决?