Draw треугольник в нижней или верхней части линии

Question

В ниже код, который я пытаюсь нарисовать треугольник в нижней части линии (для представления стрелки):

Код:

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/

Но получить сообщение об ошибке:

Uncaught TypeError: undefined is not a function 

Как треугольник можно сделать на верхней или нижней линии ?

Answer 1

Прежде всего, вам не нужно делать стрелку так вручную. SVG имеет способ поместить маркер в конец и/или в начало пути, и он поворачивает его для вас, чтобы он соответствовал углу пути. Просмотрите любой учебник о стрелочных наконечниках SVG, например this one.

Тем не менее, если вы хотите сделать это так, как вы начали:

d3.svg.symbol.type("triangle-up") должен стать d3.svg.symbol().type("triangle-up")

и

Вместо line.append("svg:path"), который помещает путь внутри элемента строки (следовательно недействителен) , do svgContainer.append("svg:path"), чтобы сделать путь братом строки.