d3j snake curved path animation

Question

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

---

update 1 - journey path 1

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

update 2 - journey 2 ** I've given it a softer look with stroke-linecap: round -- http://jsfiddle.net/0ht35rpb/243/

update 3 - journey 3 http://jsfiddle.net/0ht35rpb/245/ ^ I've started to create multiple path lines - be good to organise this so its easier to make/control

-- essentially the journey will need to consist of the key gates to pass and corners -- and maybe have different colors/speeds to take on.

update 4- journey 4 - 18/10/2017

I've upgraded this to v4 - and made a getCoord function - so the journeys can be made and ran from a series of ids http://jsfiddle.net/0ht35rpb/257/

---

I've adapted some path animation code - but I am not sure how to control or modify the path to hit specific coordinates.

//animation curved path. http://jsfiddle.net/0ht35rpb/217/

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

//dot plots http://jsfiddle.net/0ht35rpb/222/

How would I draw a line from do1 to dot3 -- or animate a curved path following multiple dot 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 fiddle where i have 3 point with a curve. When you click it add a point to the curve and transition to it:

https://jsfiddle.net/cs00L0ok/ here is the onclick that add the 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))
        })

I let you look into the jsfidddle to see the transition to the new point. You can see how i control my path. I hope that help you. come back to me if you have answer / want more info