如何在d3中创建一条带有箭头的虚线？

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

var line = d3.svg.line()
             .x(function(d) { return d.x; })
             .y(function(d) { return d.y; })
             .interpolate("basis");

var path = svg.append("path")
              .attr("d", line([{x: 50, y: 50}, {x: 200, y: 200}]))
              .attr("stroke", "black")
              .attr("stroke-dasharray", "5,5");

svg.append("defs")
   .append("marker")
   .attr("id", "arrow")
   .attr("viewBox", "0 -5 10 10")
   .attr("refX", 10)
   .attr("refY", 0)
   .attr("markerWidth", 6)
   .attr("markerHeight", 6)
   .attr("orient", "auto")
   .append("path")
   .attr("d", "M0,-5L10,0L0,5")
   .attr("class","arrowHead");

path.attr("marker-end", "url(#arrow)");