График направленной силы D3js - непрозрачность не меняется на лету - PullRequest
Новая
       8

График направленной силы D3js - непрозрачность не меняется на лету

0 голосов
/ 10 сентября 2018

Я скачал код по следующей ссылке

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>

Панель инструментов 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;

}

В настоящее время иногда это работает, но это не соответствует. Может быть, я что-то упустил. Как я могу понять это?

...