SVG Marker-end не работает - не показывает

Question

Я совершенно новичок в javascript и пытаюсь нарисовать стрелку, используя SVG.Я могу нарисовать линию, используя приведенный ниже код, но конец маркера не отображается

svg.append("svg:defs")
.append("svg:marker")
.attr("id", "arrow")
.attr("markerWidth", "13")
.attr("markerHeight", "13")
.attr("refX", "0")
.attr("refY", "3")
.attr("orient", "auto")
.attr("markerUnits","strokewidth")
.attr("stroke-width","13")
.append("svg:path").attr("d", "M0,0 L0,6 L9,3 z").attr("fill","red")    ;



svg.append("line")
     .attr("x1", function(d,i) { return x(data[i].xVal)})
     .attr("y1",  function(d,i) { return y(data[i].yVal)})
     .attr("x2",  function(d,i) { return x(data[i+1].xVal)})
     .attr("y2",  function(d,i) { return y(data[i+1].yVal)}) 
     .attr("stroke-width", 5)
     .attr("stroke", "white")
     .attr("marker-end","url(#arrow)") ;

В конце линии должен быть треугольник, похожий на стрелку и

Answer 1

Предложение Роберта, кажется, работает просто отлично.Возможно, твоя вина лежит в другом месте.

var svg = d3.select("#svgcontainer")

svg.append("svg:defs")
.append("svg:marker")
.attr("id", "arrow")
.attr("markerWidth", "13")
.attr("markerHeight", "13")
.attr("refX", "0")
.attr("refY", "3")
.attr("orient", "auto")
.attr("markerUnits","strokeWidth")
.attr("stroke-width","13")
.append("svg:path").attr("d", "M0,0 L0,6 L9,3 z").attr("fill","red")    ;



svg.append("line")
     .attr("x1", 50)
     .attr("y1", 200)
     .attr("x2", 300)
     .attr("y2", 200) 
     .attr("stroke-width", 5)
     .attr("stroke", "white")
     .attr("marker-end","url(#arrow)") ;

svg {
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<svg id="svgcontainer" width="400" height="400"></svg>