Я использую V3 популярной библиотеки d3 и в основном хочу иметь три перехода, за которыми следуют друг за другом. Первый переход должен применяться к выбору выхода, второй - к выбору обновления, а третий - к выбору ввода. Они должны быть соединены цепью таким образом, что когда один из вариантов пуст, его соответствующий переход пропускается. То есть когда нет выбора выхода, выбор обновления должен начинаться немедленно. До сих пор я придумал этот код (используя функцию 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, а div
s.