时间戳

首页 > 解决方案 > 将组件路由到 d3/event-drops 数据点时的 Angular 6 不会在 Safari 中显示

javascript - 将组件路由到 d3/event-drops 数据点时的 Angular 6 不会在 Safari 中显示

问题描述

我创建了一个测试应用程序来复制我遇到的问题。

代码库：https ://github.com/mohammadfarooqi/event-drops-d3-test-app 部署示例演示（在 safari 中查看以查看问题）：https ://mohammadfarooqi.github.io/event-drops-d3-测试应用/

我正在使用 event-drops 时间轴来显示一些“drops”（时间轴上的点）。我在一个名为“comp-a”的组件中创建了时间线。我还创建了一个名为“comp-b”的组件，它使用“comp-a”。我在 comp-b 中还有一个按钮，可将用户路由到“comp-a”。

我遇到的问题是，在 comp-b 中，event-drops 时间线显示没有问题，包括“drops”（时间线上的点）。但是，当我们单击按钮从“comp-b”转到“comp-a”时，comp-a 组件会呈现，但是时间轴上的“drops”不会显示在 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']);
  }

}

应用程序路由.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 { }

标签： javascriptangulard3.jsangular6event-drops

解决方案

仅供遇到此问题的其他人将来参考。基本上如前所述，Safari 中没有显示“点”。原因是在 SPA 中，路径是动态生成的（虚拟路径）。event-drops lib添加了一个名为'filter':'url(#metaballs)'的css样式，safari不明白svg中#metaballs的路径实际上是domain/virtual/route/#metaballs。因此，修复方法是抓取返回的 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)')

希望这可以帮助。

推荐阅读