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

添加标记到行

1 个答案: