D3 Examples - D3 line module test w/Canvas

xxxxxxxxxx
 
<!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>
    