代码之家 › 专栏 › 技术社区 › infodev

在有方向的线上画箭头

svg dom d3.js javascript

infodev · 技术社区 · 5 年前

我会把箭头放在一个特定的位置+方向

我用记号笔来做这个

export class AppComponent implements AfterViewInit,OnInit  {
  trains = [{
    progression:30,
    direction: {
      from :'Station3',
      to: 'Station2'
    }},
    {
    progression:90,
    direction: {
      from :'Station2',
      to: 'Station3'
    }
  }]

  ngAfterViewInit() {
    this.trains.map(elm=> {
    let path= document.getElementById('path9');
    let pt = path.getPointAtLength(elm.progression);
    let marker= document.getElementById("mid");
    marker.setAttribute('refX','0');
    path.setAttribute('marker-end', 'url(#mid)');
    let svg =document.getElementById('Calque_1');
    console.log(svg)
    })
  }
}

实际上没有显示标记,我不明白为什么?我准备好了 marker-end 以便于在屏幕上打印。

这是一个 stackblitz demo