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) }; }); 
0 comments:
Post a Comment