SVG标记端不起作用-不显示

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>