D3j Snake Animation Animation

Question

I am interested in trying to create a controlled curved path. Is there a way to build specific coordinates and style to mimic something like this design. I imagine this as a kind of Donnie Darko 2D tunnel or snink / snake.

---

update 1 - path 1 path

http://jsfiddle.net/0ht35rpb/241/

update 2 - journey 2 ** I gave it a milder look with a stroke-linecap: round - http://jsfiddle.net/0ht35rpb/243/

update 3 - journey 3 http://jsfiddle.net/0ht35rpb/245/ ^ I started to create several path lines - please be so kind as to organize this so that it is easier to make / manage

- essentially, the journey should consist of key gates to go through, and angles - and possibly have different colors / speeds to take over.

Route 4 Update 4/10/18/2017

I updated this to v4 - and made the getCoord function - so that trips can be made and run from a series of identifiers http://jsfiddle.net/0ht35rpb/257/

---

I adapted some path animation code, but I'm not sure how to control or change the path to reach specific coordinates.

// animated curve path. http://jsfiddle.net/0ht35rpb/217/

// static curved path http://jsfiddle.net/0ht35rpb/215/

// dotted points http://jsfiddle.net/0ht35rpb/222/

How would I draw a line from do1 to dot3 - or animate a curved path after several points?

var width = 600; var height = 400; var bezierLine = d3.svg.line() .x(function(d) { return d[0]; }) .y(function(d) { return d[1]; }) .interpolate("basis"); var svg = d3.select("#bezier-demo") .append("svg") .attr("width", width) .attr("height", height); svg.append('path') .attr("d", bezierLine([[0, 40], [25, 70], [50, 100], [100, 50], [150, 20], [200, 130], [300, 120]])) .attr("stroke", "red") .attr("stroke-width", 1) .attr("fill", "none") .transition() .duration(2000) .attrTween("stroke-dasharray", function() { var len = this.getTotalLength(); return function(t) { return (d3.interpolateString("0," + len, len + ",0"))(t) }; }); 

Answer 1

I made a simple js script where I have 3 points with a curve. When you click on it, add a point to the curve and go to it:

https://jsfiddle.net/cs00L0ok/ here is onclick, which adds a new point

  svg.on("click", function (d) { // add a nex anchor point circle_data.push({ x: d3.event.x, y: d3.event.y }); d3.select("path") .transition() .duration(2000) .attr("d", bezierLine(circle_data)) }) 

Let you take a peek at jsfidddle to see the transition to a new point. You can see how I control my path. Hope this helps you. come back to me if you have an answer / want more information