D3退出转换：动画在删除前转换为左边
[英]D3 exit transition: animation translate to left before remove
问题描述
I'm trying to have text that is generated from d3 exit with a transition animation. 
我正在尝试使用过渡动画从d3出口生成文本。 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. 由于某种原因无法获取css，文本内容为：“下一个事件”是可点击的，单击它可以看到过渡。
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: 我也尝试分别调用remove() ，如下所示：
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. 我也试过在remove()之前抛出一个delay() remove() ，但上面没有任何区别。
Lastly, I tried adding an extra .select('text') after .exit() , but to no avail. 最后，我尝试在.exit()之后添加一个额外的.select('text') .exit() ，但无济于事。
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 个解决方案
解决方案1
3 已采纳 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 . 除此之外，将attr改为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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.