在线条的底部或顶部绘制三角形

Question

In below code I'm attempting to draw a triangle at bottom of line (to represent a arrow) :

Code :

var svgContainer = d3.select("body").append("svg")
        .attr("width", 200)
        .attr("height", 200);

//Draw the line
var line = svgContainer.append("line")
        .attr("x1", 5)
        .attr("y1", 5)
        .attr("x2", 5)
        .attr("y2", 50)
        .attr("stroke-width", 2)
        .attr("stroke", "black");

line.append("svg:path") 
        .attr("d", d3.svg.symbol.type("triangle-up"))
        .style("fill", "black");

jsfiddle : http://jsfiddle.net/Qh9X5/3420/

But receive error :

Uncaught TypeError: undefined is not a function 

How can the triangle be drawn at top or bottom of line ?

Answer 1

First of all, you don't need to make the arrowhead so manually. SVG has a way to put a marker at the end and/or beginning of a path, and it rotates it for you to match the path's angle. Check out any tutorial about SVG arrowheads, like this one .

Still, if you want to do it the way you started:

d3.svg.symbol.type("triangle-up") should become d3.svg.symbol().type("triangle-up")

and

Instead of line.append("svg:path") , which puts a path inside a line element (hence invalid), do svgContainer.append("svg:path") to make the path a sibling of the line.