D3 exit transition: animation translate to left before remove
Question
I'm trying to have text that is generated from d3 exit with a transition animation. It supposed to fly slowly over to the left and fade out at the same time. However, you will notice from the following snippet that the text is immediately updated and the exit animation never seems to be called.
Can't get the css applied for some reason, the text that reads: "Next Event" is clickable, click on it to see the transition.
var width = 200; var height = 100; var margins = {left:20, right:20, top:0, bottom:0 }; var svg = d3.select('body') .append('svg') .attr('width', width+margins.left+margins.right) .attr('height', height+margins.top+margins.bottom); var data = [ {'Date':'May-24', 'Event':'Event 1'}, {'Date':'Jun-30', 'Event':'Event 2'} ]; var dateG = svg.append('g') .attr('transform', 'translate('+margins.left+','+(margins.top+40)+')') .attr('class', 'uiText'); function displayData(data) { var dateText = dateG .selectAll('text') .data([data]); dateText .enter() .append('text'); dateText .attr('x', 10) .attr('y', 0) .text(function(d) { return d.Date; }); dateText .exit() .transition() .duration(750) .attr('x', -50) .attr('opacity', 0) .remove(); } displayData(data[0]); d3.select('#button').on('click', function(d) { displayData(data[1]); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="//d3js.org/d3.v3.min.js"></script> </head> <div class='button' id='button'>Next Event</div> <body>
I have also tried calling remove() separately, like so:
dateText
.exit()
.transition()
.duration(750)
.attr('x', -50)
.attr('opacity', 0);
dateText
.exit()
.transition()
.duration(750)
.remove();
I have also tried throwing in a delay() before remove() , but none of the above made a difference.
Lastly, I tried adding an extra .select('text') after .exit() , but to no avail.
Question: Can I have an exit animation as per my code above with a few tweaks, or is there a fundamental flaw in my implementation? What do I need to tweak?
1 answers
solution1
3 ACCPTED 2018-05-26 14:10:03
If you don't use a key function...
.data([data], function(d) {
return d.Event
});
... the data will be bound by index .
Besides that, change attr to style .
Here is the code with these changes:
var width = 200; var height = 100; var margins = { left: 20, right: 20, top: 0, bottom: 0 }; var svg = d3.select('body') .append('svg') .attr('width', width + margins.left + margins.right) .attr('height', height + margins.top + margins.bottom); var data = [{ 'Date': 'May-24', 'Event': 'Event 1' }, { 'Date': 'Jun-30', 'Event': 'Event 2' } ]; var dateG = svg.append('g') .attr('transform', 'translate(' + margins.left + ',' + (margins.top + 40) + ')') .attr('class', 'uiText'); function displayData(data) { var dateText = dateG .selectAll('text') .data([data], function(d) { return d.Event }); dateText .enter() .append('text'); dateText .attr('x', 10) .attr('y', 0) .text(function(d) { return d.Date; }); dateText .exit() .transition() .duration(750) .attr('x', -50) .style('opacity', 0) .remove(); } displayData(data[0]); d3.select('#button').on('click', function(d) { displayData(data[1]); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="//d3js.org/d3.v3.min.js"></script> </head> <div class='button' id='button'>Next Event</div> <body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.