Question

我一直在摸不着头......我有一个SVG正在渲染有向图的节点和链接。但是，线条没有显示箭头。

以下是我正在努力解决的箭头的代码段。具有颜色的节点和线都渲染，而不是箭头。我在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）......

Answer 1

问题证明箭头在那里但被节点隐藏了。我不得不更改markerWidth和markerHeight以使数字加倍并显示出来。

arrow d3 graph svg无法渲染

1 个答案: