Угол 6, когда компонент направляется на точки данных d3 / drop-событий, не отображаются в Safari

Question

Я создал тестовое приложение для воспроизведения проблемы, с которой я столкнулся.

кодовая база: https://github.com/mohammadfarooqi/event-drops-d3-test-app развернутая демонстрационная демонстрация (посмотрите в safari, чтобы увидеть проблему): https://mohammadfarooqi.github.io/event-drops-d3-test-app/

Я использую временную шкалу drop-event, чтобы отобразить некоторые «капли» (точки на временной шкале).Я создал временную шкалу в компоненте под названием «comp-a».Я также создал компонент под названием «comp-b», который использует «comp-a».У меня также есть кнопка в comp-b, которая направляет пользователя к 'comp-a'.

Проблема, с которой я столкнулся, заключается в том, что в comp-b отображается временная шкала отбрасывания событий без каких-либо проблем, включая «отбрасывания» (точки на временной шкале).Однако, когда мы нажимаем кнопку, чтобы перейти к «comp-a» из «comp-b», компонент comp-a рендерит, однако, «капли» на временной шкале не отображаются в Safari (мобильный / планшет), однако всеработает в Chrome.

comp-a.component.html

<div id="eventdrops-demo"></div>

comp-a.component.ts

import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3v4';
import eventDrops from 'event-drops';

@Component({
  selector: 'app-comp-a',
  templateUrl: './comp-a.component.html',
  styleUrls: ['./comp-a.component.css']
})
export class CompAComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    const chart = eventDrops({
      d3,
      drop: {
        date: d => d.date
      }
    });

    const repositoriesData = [
      {
        name: 'admin-on-rest',
        data: [{ date: new Date('2018/01/15 14:21:31') } ],
      },
      {
        name: 'event-drops',
        data: [{ date: new Date('2018/01/15 13:24:57') } ],
      },
      {
        name: 'sedy',
        data: [{ date: new Date('2018/01/15 13:25:12') } ],
      },
    ];

    d3
      .select('#eventdrops-demo')
      .data([repositoriesData])
      .call(chart);
  }

}

comp-b.component.html

<p>
  comp-b works!
</p>

<app-comp-a></app-comp-a>

<button (click)="goto()">test</button>

comp-b.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-comp-b',
  templateUrl: './comp-b.component.html',
  styleUrls: ['./comp-b.component.css']
})
export class CompBComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
  }

  goto() {
    this.router.navigate(['a']);
  }

}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

import { CompAComponent } from './components/comp-a/comp-a.component';
import { CompBComponent } from './components/comp-b/comp-b.component';

const routes: Routes = [
  { path: '', component: CompBComponent },
  { path: 'a', component: CompAComponent }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [ RouterModule ],
  declarations: []
})
export class AppRoutingModule { }

Answer 1

Только для дальнейшего использования кем-то, кто сталкивается с этой проблемойВ основном, как уже упоминалось, «точки» не показывались в сафари.Причиной этого было то, что в SPA пути генерируются на лету (виртуальные пути).Событие сбрасывает lib add в стиле css, называемом «filter»: «url (#metaballs)», и safari не понимает, что путь к #metaballs в svg - это на самом деле мета домены / virtual / route / #.Поэтому исправление состояло в том, чтобы получить возвращенный объект d3, как показано в comp-a.component.ts, и просто переписать свойство фильтра для всех g.drops с фильтром должно быть 'url (' + window.location.href + '#metaballs) '.

т.е.: d3.select (' # eventdrops-demo '). SelectAll (' g.drops '). Style (' filter ',' url ('+ window.location.href +'#metaballs) ')

Надеюсь, это поможет.