score:1

Accepted answer

Problem solved. Angular2 uses

<base href="/">

on the page, which fouls the path's ability to find url(#Arrow).

The solution is to add the marker attribute in d3.js and pre-pend the location.href:

renderArrows() {
    var arrows = d3.selectAll('path.arrow');

    arrows.each(function (d) {
      var path = d3.select(this);
      path
      .attr('stroke-linecap', 'round')
      .attr('marker-end', function(d,i){ return "url(" + location.href + "#Arrow)" })
    })
  }

More information here: Using base tag on a page that contains SVG marker elements fails to render marker


Related Query