添加標記到線

Question

下面的代碼試圖標記添加到線（箭頭朝上）：

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

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

    var marker = line.append("svg:marker") 
    .attr("viewBox", "0 0 10 10") 
    .attr("refX", 0) 
    .attr("refY", 0) 
    .attr("markerUnits", "strokeWidth") 
    .attr("markerWidth", 8) 
    .attr("markerHeight", 6) 
    .attr("orient", "auto"); 

但是正在顯示只是行。如何修改代碼使箭頭出現？

的jsfiddle：http://jsfiddle.net/Qh9X5/3444/

Answer 1

添加以下內容：

var left = svgContainer.append("line") 
    .attr("x1", 40) 
    .attr("y1", 75) 
    .attr("x2", 50) 
    .attr("y2", 50) 
    .attr("stroke-width", 2) 
    .attr("stroke", "black"); 
var right = svgContainer.append("line") 
    .attr("x1",60) 
    .attr("y1",75) 
    .attr("x2",50) 
    .attr("y2",50) 
    .attr("stroke-width",2) 
    .attr("stroke","black"); 

的箭頭僅僅是一個三條直線組合物。

JS Fiddle