How to create a dashed line with arrows on each dash in d3.js?

1
2
3

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

var data = [{x: 50, y: 50}, {x: 450, y: 50}]; // define the data for the line

var line = d3.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; });

// create the path element for the line
svg.append("path")
    .datum(data)
    .attr("class", "dashed-line")
    .attr("d", line)
    .attr("stroke-dasharray", "5,5"); // specify the dash pattern

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

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

1
2

svg.select(".dashed-line")
    .attr("marker-end", "url(#arrow)");