Question

我正在尝试使用过渡动画从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();

我还试过在delay()之前投掷remove()，但上述情况都没有区别。

最后，我尝试在.select('text')之后添加额外的.exit()，但无济于事。

问题：我可以根据上面的代码进行退出动画并进行一些调整，还是我的实施存在根本缺陷？我需要调整什么？

Answer 1

如果您不使用关键功能......

.data([data], function(d) {
    return d.Event
});

......数据将受 index 约束。

除此之外，请将attr更改为style。

以下是包含这些更改的代码：

＆＃13;

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]);
});

＆＃13;

<!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>

＆＃13;

D3退出转换：动画在删除之前翻译为左

1 个答案: