D3退出转换：动画在删除前转换为左边
[英]D3 exit transition: animation translate to left before remove
问题描述
我正在尝试使用过渡动画从d3出口生成文本。 它应该慢慢向左飞行并同时淡出。 但是，您将从以下代码段中注意到文本立即更新，似乎永远不会调用退出动画。
由于某种原因无法获取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>
我也尝试分别调用remove() ，如下所示：
dateText
.exit()
.transition()
.duration(750)
.attr('x', -50)
.attr('opacity', 0);
dateText
.exit()
.transition()
.duration(750)
.remove();
我也试过在remove()之前抛出一个delay() remove() ，但上面没有任何区别。
最后，我尝试在.exit()之后添加一个额外的.select('text') .exit() ，但无济于事。
问题：我可以根据上面的代码进行退出动画并进行一些调整，或者我的实现中是否存在根本缺陷？ 我需要调整什么？
1 个解决方案
解决方案1
3 已采纳 2018-05-26 14:10:03
如果你不使用按键功能......
.data([data], function(d) {
return d.Event
});
...数据将受索引约束。
除此之外，将attr改为style 。
以下是包含这些更改的代码：
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>
D3在exit（）上的过渡
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.