i've created transition that's invoked in d3's selection.each(), there slight delay between callback , transition. i'd transition appear continuous rather having slight delay. i've tried playing different duration , delay values no avail. here relevant code.
transition(); function transition() { data.map( (d) => { d.x = d3.random.normal(d['x'], 5)(); d.y = d3.random.normal(d['y'], 5)(); return d; }); g.selectall('path') .data(data) .transition() .duration(400) .attr('d', (d, i) => line( getpath(d, i) ) ) .each('end', transition); } as can see in this working codepen, there slight delay between transitions. i'd transition appear continuous. how can accomplish this?
a couple of points...
- the default easing in d3 transitions not linear why perceive delay.
- you setting new transition after each individual path transition completes.
eachmethod calls every node in selection , there no built-in endall event in d3 transitions but, you can make one shown below.
the first point important. second point avoiding unnecessarily re-applying transitions , interrupting applied ones. not perceptible practice anyway.
here working example...
var colors = [ '#ffaa5c', '#da727e', '#ac6c82', '#685c79', '#455c7b' ] var line = d3.svg.line() .x( (d) => d.x ) .y( (d) => d.y ) .interpolate('linear'); var svg = d3.select('body').append('svg'); var svgw = d3.select('svg').node().clientwidth; var svgh = d3.select('svg').node().clientheight; var w = svgw/4; var h = svgh/4; var data = [ {x: -w/2, y: -h/4}, {x: 0, y: -h/2}, {x: w/2, y: -h/4}, {x: w/math.pi, y:h/2.5}, {x: -w/4, y: h/2.5} ]; var getpath = (d, i) => { var path = []; var startpoint = { x: 0, y: 0 }; // point 1 path.push(startpoint); // point 2 path.push(d); // point 3 path.push(data[i + 1] || data[0]); // point 4 path.push(startpoint); return path; } var g = svg.append('g') .attr('transform', 'translate(' + svgw/2 + ',' + svgh/2 + ')'); g.selectall('path') .data(data) .enter().append('path') .attr({ fill: (d, i) => colors[i] }); transition(); function transition() { data.map( (d) => { d.x = d3.random.normal(d['x'], 5)(); d.y = d3.random.normal(d['y'], 5)(); return d; }); g.selectall('path') .data(data) .transition() .ease("linear") .duration(50) .attr('d', (d, i) => line( getpath(d, i) ) ) .call(endall, function(){window.requestanimationframe(transition)}); } function endall(transition, callback) { if (transition.size() === 0) { callback() } var n = 0; transition .each(function() { ++n; }) .each("end", function() { if (!--n) callback.apply(this, arguments); }); }body { background-color: #181818; display: flex; justify-content: center; align-items: center; height: 100vh; width: 100%; } svg { overflow: visible; width: 100%; height: 100%; }<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
Comments
Post a Comment