JSFiddle - React, Tailwind, and code Playground

by mamounothman

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
 <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
    <script src="https://rawgit.com/Anujarya300/bubble_maps/master/data/geography-data/datamaps.none.js"></script>
</head>
<body>
   
    <div id="canada" style="height: 600px; width: 900px;"></div>
    </body>

</html>

CSS

.line {
    stroke: blue;
    stroke-width: 1.5px;
    fill: white;
}

circle {
    fill: red;
}
#marker {
  stroke: black;
    fill: black;
}

JavaScript

var svg = d3.select("body").append("svg").append("g").attr("transform", "translate(100,50)")

    svg.append("svg:defs")
	.append("svg:marker")
	.attr("id", "arrow")	
	.attr("refX", 2)
	.attr("refY", 6)
	.attr("markerWidth", 13)
	.attr("markerHeight", 13)
	.attr("orient", "auto")
	.append("svg:path")
	.attr("d", "M2,2 L2,11 L10,6 L2,2");


var line = d3.svg.line()
                 .x( function(point) { return point.lx; })
                 .y( function(point) { return point.ly; });

function lineData(d){
    // i'm assuming here that supplied datum 
    // is a link between 'source' and 'target'
    var points = [
        {lx: d.source.x, ly: d.source.y},
        {lx: d.target.x, ly: d.target.y}
    ];
    return line(points);
}

var path = svg.append("path")
.data([{source: {x : 0, y : 0}, target: {x : 80, y : 80}}])
    .attr("class", "line")
	    //.style("marker-end", "url(#arrow)")
    .attr("d", lineData);
//var arrow = svg.append("svg:path")
	//.attr("d", "M2,2 L2,11 L10,6 L2,2");


console.log(d3.svg.symbol())

var arrow = svg.append("svg:path")
	.attr("d", d3.svg.symbol().type("triangle-down")(10,1));



  arrow.transition()
      .duration(2000)
      .ease("linear")
      .attrTween("transform", translateAlong(path.node()))
      //.each("end", transition);


// Returns an attrTween for translating along the specified path element.
function translateAlong(path) {
  var l = path.getTotalLength();
    var ps = path.getPointAtLength(0);
    var pe = path.getPointAtLength(l);
    var angl = Math.atan2(pe.y - ps.y, pe.x - ps.x) * (180 / Math.PI) - 90;
    var rot_tran = "rotate(" + angl + ")";
  return function(d, i, a) {
    console.log(d);
    
    return function(t) {
      var p = path.getPointAtLength(t * l);
      return "translate(" + p.x + "," + p.y + ") " + rot_tran;
    };
  };
}

var totalLength = path.node().getTotalLength();

    path
      .attr("stroke-dasharray", totalLength + " " + totalLength)
      .attr("stroke-dashoffset", totalLength)
 ...