Draw triangle at bottom or top of line

blue-sky Published at Dev

blue-sky

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 ?

meetamit

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.