d3 svg如何在末尾创建带箭头的折线

Question

我正在尝试在polyline的末尾添加一个箭头但它缩放不正确。我对d3和svg比较陌生，所以我希望有些人能弄清楚如何做到这一点：

JS Fiddle

    var w = 300;
    var h = 300;
    var svg = d3.select("body")
      .append("svg")
      .attr("width", w)
      .attr("height", h);

    //arrow
    svg.append("svg:defs")
        .append("svg:marker")
        .attr("id", "arrow")
        .attr("refX", 6)
        .attr("refY", 6)
        .attr("markerWidth", 30)
        .attr("markerHeight", 30)
        .attr("orient", "auto")
        .append("path")
        .attr("d", "M 0 0 12 6 0 12 3 6")
        .style("fill", "black");


    //line              
    svg.append("line")
      .attr("x1", 100)
      .attr("y1", 100)
      .attr("x2", 200)
      .attr("y2", 100)
      .attr("stroke-width", 1)
      .attr("stroke", "black")
      .attr("marker-end", "url(#arrow)");

    // polyline
    svg.append("polyline")
        .attr("fill", "none")
        .attr("stroke", "blue")
        .attr("stroke-width", "2")
        .attr("points", "05,05 15,05 15,15 25,15 25,25 35,25")
        .attr("marker-end", "url(#arrow)");