d3: Comment correctement la chaîne de transitions sur les différentes sélections

Je suis en utilisant la V3 de la populaire d3 bibliothèque et fondamentalement voulez avoir trois transitions, suivi par les autres: La première transition devrait s'appliquer à la sortie de la sélection, de la seconde à la mise à jour de la sélection et la troisième à l'entrée de sélection. Ils doivent être enchaînés de telle manière que lorsque l'un des sélections est vide, sa transition correspondante est ignorée. I. e. quand il n'y a pas de sortie de la sélection, de la mise à jour de la sélection devrait commencer immédiatement. Jusqu'à présent, je suis venu avec ce code (à l'aide de la delay fonction). 

//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);

Tout d'abord, il ne permet pas de "sauter" les transitions et d'autre part je pense qu'il ya une meilleure façon que delay. J'ai regardé http://bl.ocks.org/mbostock/3903818 mais je n'ai pas vraiment comprendre ce qui se passe.

Aussi, en quelque sorte, l'écriture items.exit().transition().duration(TRANSITION_DURATION).remove() ne fonctionne pas avec le items, probablement parce qu'ils ne sont pas des éléments SVG mais divs.

InformationsquelleAutor wnstnsmth | 2013-06-13
  1. 33

    Sûr. Voici deux façons.

    Tout d'abord, vous pouvez utiliser un explicite retard, ce qui permet ensuite de calculer à l'aide de sélection.vide de sauter les vides des transitions. (Ce n'est qu'une modification mineure de ce que vous avez déjà.)

    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

    Un délicat, c'est ici que vous devez créer la transition sur la mise à jour des éléments avant vous créez la transition sur la saisie des éléments; c'est parce que saisissez.ajouter fusionne saisie des éléments dans la mise à jour de la sélection, et vous voulez les garder séparés; voir la Mise à jour-seulement de Transition exemple pour plus de détails.

    Sinon, vous pouvez utiliser de transition.transition à chaîne de transitions, et de transition.chaque à appliquer ces enchaîné les transitions existantes sélections. Dans le contexte de la transition.chaque, de la sélection.transition hérite de la transition existante plutôt que d'en créer un nouveau.

    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

    Je suppose que le dernier est un peu plus idiomatiques, bien que l'utilisation de transition.chaque appliquer des transitions pour les sélections (plutôt que de tirer des transitions avec les paramètres par défaut) n'est pas largement connu.

    • Corrigez-moi si je me trompe, mais je pense qu'il y a une petite erreur dans votre code à l'aide de la delay()-Méthode. Quand il n'y a pas de mise à jour de transition (c'est à dire pas d'éléments de changement de lieu), items.enter().empty() toujours égale false, donc elemens de sortie, puis, pour duration millisecondes rien ne se passe, et puis l'entrée de transition commence. Mais si il n'y a pas de mise à jour de visual transition en tenant lieu, je veux la sortie de transition à suivre immédiatement par l'entrée de transition. J'ai donc enregistrer la mise à jour de transition comme suit:
    • var updatedItems = div.transition() .duration(duration) .delay(!div.exit().empty() * duration) et changement .delay((!div.exit().empty() + !div.enter().empty()) * duration) en .delay((!div.exit().empty() + !updatedItems.empty()) * duration). De cette manière, il fonctionne selon les besoins.
    InformationsquelleAutor mbostock