d3: Wie man richtig Kette übergänge auf unterschiedliche Auswahlen

Ich bin mit V3 der beliebten d3-Bibliothek und im Grunde wollen, haben drei übergänge, gefolgt von jedem anderen: Der erste übergang sollte für das exit die Auswahl, die zweite auf die update-Auswahl und der Dritte auf die enter-Auswahl. Sie sollten verkettet werden, in einer solchen Weise, dass, wenn eine der Auswahlmöglichkeiten ist leer, seine jeweiligen übergang übersprungen. I. e. wenn es keine exit-Auswahl, die update-Auswahl sollte sofort beginnen. So weit, ich habe mit diesem code (mit der delay - Funktion). 

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

Erste von allen, die es nicht erlauben die "überspringen" übergänge und zweitens denke ich, dass es einen besseren Weg gibt, als delay. Ich habe http://bl.ocks.org/mbostock/3903818 aber ich habe nicht wirklich verstehen, was passiert ist.

Auch, irgendwie schreiben nur items.exit().transition().duration(TRANSITION_DURATION).remove() funktioniert nicht mit der items, wahrscheinlich, weil Sie nicht SVG-Elemente, aber divs.

InformationsquelleAutor wnstnsmth | 2013-06-13
  1. 33

    Sicher. Hier sind zwei Möglichkeiten.

    Erste, man könnte eine explizite Verzögerung, die Sie dann berechnen Sie mit Auswahl.leer zu überspringen leere übergänge. (Dies ist nur eine kleine Modifikation, was Sie bereits haben.)

    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

    Eine heikle Sache hier ist, dass Sie haben, um den übergang auf die Aktualisierung der Elemente vor Sie schaffen den übergang auf die Eingabe-Elemente, da geben Sie.Anhängen verbindet die Eingabe-Elemente in der Auswahl aktualisieren, und Sie wollen, um Sie zu trennen; siehe Update-nur Übergang Beispiel für details.

    Alternativ können Sie übergang.übergang zu Kette übergänge, und übergang.jeder, um diese übergänge verkettet, um bestehende Auswahlen. Im Kontext des übergangs.jeder, Auswahl.übergang erbt die vorhandenen übergang anstatt einen neuen zu erstellen.

    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

    Ich nehme an, letzteres ist ein bisschen mehr Redewendungen, obwohl mit übergang.jedes anwenden der übergänge zur Auswahl (anstatt abzuleiten übergänge mit default-Parameter) ist das nicht eine allgemein bekannte Funktion.

    • Korrigieren Sie mich, wenn ich falsch Liege, aber ich denke, es gibt einen kleinen Fehler in Ihrem code mit der delay()-Methode. Wenn es kein update übergang (d.h. keine Elemente ändern), der items.enter().empty() immer noch gleich false, so elemens verlassen, dann, für duration Millisekunden passiert nichts, und dann die enter-übergang beginnt. Aber, wenn es keine visuelle update übergang stattfindet, möchte ich die Ausfahrt übergang folgte sofort, indem Sie die enter-übergang. Ich habe so speichern Sie die update-übergang wie folgt:
    • var updatedItems = div.transition() .duration(duration) .delay(!div.exit().empty() * duration) und ändern .delay((!div.exit().empty() + !div.enter().empty()) * duration) in .delay((!div.exit().empty() + !updatedItems.empty()) * duration). Auf diese Weise funktioniert es wie gewünscht.
    InformationsquelleAutor mbostock
Schreibe einen Kommentar