arrow d3 graph svg not rendering

Question

I have been scratching my head for a long time on this... I have an SVG that is rendering nodes and links for a directed graph. However, the lines are not showing arrows.

Here is the code snippet for the arrow that I am struggling with. The nodes and lines with the color all render, just not the arrow. I made this work on javascript without a problem but using Angular is not working. I can paste the Link class and the CSS if needed, let me know.

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;
}

The code that doesnt render (and doesnt error) is marker-end="url(#arrow)". I have also tried to change it to [attr.marker-end]="url(#arrow)" which actually errors out (it says it cannot find #arrow)...

Answer 1

The problem turned out that the arrows were there but being hidden by the nodes. I had to change the markerWidth and markerHeight to double the numbers and they showed up.