Built with blockbuilder.org
xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v5.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style></head><body> <script> const src = { x:100, y:100 }; const dst = { x:800, y:400 }; // Feel free to change or delete any of the code you see in this editor! const svg = d3.select("body").append("svg") .attr("width", 960) .attr("height", 500) const line = d3.line() .x((d) => d.x) .y((d) => d.y); const path = svg.append("path") .attr("d", line([src, dst])) .attr("fill", "none") .attr("stroke", "#cccccc") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 1); const c1 = svg.append("circle") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .attr("r", 15) .attr("fill", "red") .attr("cx", src.x) .attr("cy", src.y); const c2 = svg.append("circle") .attr("stroke", "#fff") .attr("stroke-width", 0.5) .attr("r", 15) .attr("fill", "green") .attr("cx", dst.x) .attr("cy", dst.y); c1.on("click", function() { svg.append("line") .attr("x1", src.x) .attr("y1", src.y) .attr("x2", src.x) .attr("y2", src.y) .attr("stroke", "#fe2d2d") .attr("stroke-width", 1.5) .transition().duration(1000).ease(d3.easeLinear) .attrTween("x1", function() { const x = d3.interpolateNumber(src.x, dst.x); return function(t) { let nxt = x(t-0.05); if(nxt < src.x) nxt = src.x; return nxt; }; }) .attrTween("y1", function() { const y = d3.interpolateNumber(src.y, dst.y); return function(t) { let nxt = y(t-0.05); if(nxt < src.y) nxt = src.y; return nxt; }; }) .attr("x2", dst.x) .attr("y2", dst.y) .on('end', function() { d3.select(this).remove(); }); }); </script></body> https://d3js.org/d3.v5.min.js