21

我正在使用流行的 d3 库的 V3 并且基本上希望有三个转换，然后是彼此：第一个转换应该应用于退出选择，第二个转换到更新选择，第三个转换到进入选择。它们应该以这样一种方式链接，即当其中一个选择为空时，跳过其各自的转换。即当没有退出选择时，更新选择应该立即开始。到目前为止，我已经想出了这段代码（使用delay函数）。

// DATA JOIN
var items = d3.select('#data').selectAll('.item');
items = items.data(data, function(d){ 
    return d.twitter_screenname;
});


// EXIT
items.exit().transition().duration(TRANSITION_DURATION).style('opacity', 0).remove();

// UPDATE
// Divs bewegen
items.transition().duration(TRANSITION_DURATION).delay(TRANSITION_DURATION * 1)
    .style('left', function(d, i) {
        return positions[i].left + "px";
    }).style('top', function(d, i) {
        return positions[i].top + "px";
    });

// ENTER
// Divs hinzufügen
var div = items.enter().append('div')
    .attr('class', 'item')
    .style('left', function(d, i) {
        return positions[i].left + "px";
    }).style('top', function(d, i) {
        return positions[i].top + "px";
    });

 div.style('opacity', 0)
    .transition().duration(TRANSITION_DURATION).delay(TRANSITION_DURATION * 2)
    .style('opacity', 1);

首先，它不允许“跳过”过渡，其次我认为有比delay. 我查看了http://bl.ocks.org/mbostock/3903818但我并不真正了解发生了什么。

此外，不知何故，只是写作items.exit().transition().duration(TRANSITION_DURATION).remove()不适用于items，可能是因为它们不是 SVG 元素，而是divs。

4

1 回答 1

33

当然。这里有两种方法。

首先，您可以使用显式延迟，然后使用selection.empty进行计算以跳过空转换。（这只是对您已有的内容的微小修改。）

var div = d3.select("body").selectAll("div")
    .data(["enter", "update"], function(d) { return d || this.textContent; });

// 2. update
div.transition()
    .duration(duration)
    .delay(!div.exit().empty() * duration)
    .style("background", "orange");

// 3. enter
div.enter().append("div")
    .text(function(d) { return d; })
    .style("opacity", 0)
  .transition()
    .duration(duration)
    .delay((!div.exit().empty() + !div.enter().empty()) * duration)
    .style("background", "green")
    .style("opacity", 1);

// 1. exit
div.exit()
    .style("background", "red")
  .transition()
    .duration(duration)
    .style("opacity", 0)
    .remove();

http://bl.ocks.org/mbostock/5779682

这里有一件棘手的事情是，您必须先在更新元素上创建过渡，然后再在输入元素上创建过渡；这是因为enter.append将输入元素合并到更新选择中，并且您希望将它们分开；有关详细信息，请参阅仅更新转换示例。

或者，您可以使用transition.transition链接过渡，并使用transition.each将这些链接的过渡应用到现有选择。在transition.each 的上下文中，selection.transition 继承现有的过渡而不是创建一个新的。

var div = d3.select("body").selectAll("div")
    .data(["enter", "update"], function(d) { return d || this.textContent; });

// 1. exit
var exitTransition = d3.transition().duration(750).each(function() {
  div.exit()
      .style("background", "red")
    .transition()
      .style("opacity", 0)
      .remove();
});

// 2. update
var updateTransition = exitTransition.transition().each(function() {
  div.transition()
      .style("background", "orange");
});

// 3. enter
var enterTransition = updateTransition.transition().each(function() {
  div.enter().append("div")
      .text(function(d) { return d; })
      .style("opacity", 0)
    .transition()
      .style("background", "green")
      .style("opacity", 1);
});

http://bl.ocks.org/mbostock/5779690

我想后者更惯用一些，尽管使用 transition.each 将转换应用于选择（而不是使用默认参数派生转换）并不是一个广为人知的功能。

于 2013-06-14T05:43:25.690 回答