箭头 d3 图形 svg 未呈现答案

【问题标题】：arrow d3 graph svg not rendering箭头 d3 图形 svg 未呈现
【发布时间】：2018-09-08 23:34:06
【问题描述】：

我很长时间以来一直在摸不着头脑......我有一个 SVG，它正在为有向图呈现节点和链接。但是，这些线条没有显示箭头。

这是我正在努力使用的箭头的代码 sn-p。带有颜色的节点和线都渲染，只是箭头没有。我在 javascript 上完成这项工作没有问题，但使用 Angular 不起作用。如果需要，我可以粘贴 Link 类和 CSS，请告诉我。

import { Component, Input } from '@angular/core';
import { Link } from '../../../d3';

@Component({
  selector: '[linkVisual]',
  template: `
<svg>
  <defs>
    <marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
      <path d="M0,-5L10,0L0,5" class="arrow-head" />
    </marker>
  </defs>
  <line
      class="link"
      [attr.x1]="link.source.x"
      [attr.y1]="link.source.y"
      [attr.x2]="link.target.x"
      [attr.y2]="link.target.y"
      [attr.stroke]="link.color2"
      marker-end="url(#arrow)"
  >
  </line>
</svg>
  `,
  styleUrls: ['./link-visual.component.css']
})
export class LinkVisualComponent  {
  @Input('linkVisual') link: Link;
}

不呈现（并且不出错）的代码是marker-end="url(#arrow)"。我还尝试将其更改为 [attr.marker-end]="url(#arrow)" 实际出错（它说它找不到#arrow）...

【问题讨论】：

标签： javascript angular d3.js svg graph

【解决方案1】：

问题原来是箭头在那里，但被节点隐藏了。我不得不更改 markerWidth 和 markerHeight 以使数字翻倍，然后它们就出现了。

【讨论】：