0

我从以下链接下载了代码

https://medium.com/netscape/visualizing-data-with-angular-and-d3-209dde784aeb

我从下载主题

https://github.com/akveo/ngx-admin

我设法使用 angular v6 将两者集成到单个项目中。现在我创建了我的新组件并使用了来自媒体站点的图形组件。我已将属性添加到节点中，显示为“性别”，显示 M 或 F。现在我在屏幕右侧有一个面板，如果单击男性复选框，性别 M 的节点应突出显示，如果选择 F，则突出显示女性节点和反向以取消选中复选框。

仪表板组件.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);

}
}

仪表板组件.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;

}

目前，有时它有效，但并不一致。也许我错过了一些东西。我怎么能弄清楚这个？

4

0 回答 0