Old school D3 from simpler times

All examples By author By category About

Andrew-Reid

Full window Github gist

D3 line module test w/Canvas

<!DOCTYPE html>
<html>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="funkyline.js"></script>
<canvas width="960" height="500"></canvas>
<script>
var svg = d3.create("svg");

var canvas = d3.select("canvas")
var context = canvas.node().getContext("2d");

var line = d3.line()
  .curve(d3.funkyline().interval(10))
  .context(context);

var data1 = [[100,200],[300,200]];
var data2 = [[100,200],[860,200]];
var data = [data1,data2]
  
var circles = svg.selectAll(null)
  .data(data1)
  .enter()
  .append("circle")
  .attr("cx", function(d) { return d[0]; })
  .attr("cy", function(d) { return d[1] + 100; })
  .attr("r", 5);

context.beginPath();
line(data1);
context.stroke();

var j = 0;
function transition() {
	j++;
	circles
	  .data(data[j%2])
	  .filter(function(d,i) { return i == 1; })
	  .transition()
	  .attr("cx", function(d) { return d[0]; })
	  .tween("attr.anything", function(d) {
			var that = d3.select(this);
			var interpolate = j%2 ? d3.interpolateNumber(data1[1][0],data2[1][0]) : d3.interpolateNumber(data2[1][0],data1[1][0]);
			return function(t) {
				var datum =  [[100,300],[interpolate(t),300]];
				context.clearRect(0,0,960,500);
				context.beginPath();
				line(datum);
				context.stroke();
				
			}
	  })
	  .duration(2000)
	  .on("end",transition);
}

transition();

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js