Question

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

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

我正在使用事件丢弃时间轴来显示一些“丢弃”信息。（时间轴上的点）。我在名为＆＃39; comp-a＆＃39;的组件中创建了时间轴。我还创建了一个名为＆＃39; comp-b＆＃39;使用＆＃39; comp-a＆＃39;。我还在comp-b中有一个按钮，用于将用户路由到＆＃39; comp-a＆＃39;。

我遇到的问题是，在comp-b中，事件丢弃时间线显示没有问题，包括＆＃39; drop＆＃39; （时间轴上的点）。但是，当我们点击按钮进入＆＃39; comp-a＆＃39;从＆＃39; comp-b＆＃39;，comp-a组件呈现，然而，＆＃39; drop＆＃39;在时间轴上不显示在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添加了一个名为'filter'的css样式：'url（#metaballs）'，safari不明白svg中#metaballs的路径实际上是domain / virtual / route / #metataballs。因此，修复是抓取返回的d3对象，如comp-a.component.ts所示，并简单地为所有g.drops写过滤器属性，过滤器应为'url（'+ window.location.href +'#metaballs ）”

ie：d3.select（'＃eventdrops-demo'）。selectAll（'g.drops'）。style（'filter'，'url（'+ window.location.href +'＃metaballs）'）< / p>

希望这会有所帮助。

当组件路由到d3 /事件丢弃数据点时，Angular 6不会显示在Safari

1 个答案: