Цепные переходы D3.js для составных анимаций для разных форм

Что я пытаюсь сделать...

Я играю с D3, чтобы сделать составную анимацию. У меня есть следующее конечное состояние:

введите здесь описание изображения

По сути, я хочу, чтобы анимация соединяла точки - добавьте первый круг. Затем проведите линию ко второму кругу. После того, как линия нарисована, добавляется второй круг.

Чтобы добавить визуальной привлекательности, я выполняю другие переходы, такие как изменение радиуса окружности для первой и второй окружности по мере рисования линии.

Что я пробовал...

Я могу добавлять круги и рисовать линии по отдельности, включая анимацию. Однако я не уверен, как продолжить цепочку переходов вместе, чтобы сформировать составную анимацию.

Я читал о переходах/анимациях, в котором предлагается использовать each("end"). Хотя это сработало бы для рисования начальных объектов, end не срабатывает до тех пор, пока не будут выполнены другие переходы.

Вопросы

  • Является ли использование each("end", ...) правильным подходом для цепочки переходов?
  • Как запустить другую анимацию (т. е. начать рисовать линию), в то же время позволяя завершить другой переход (т. е. радиус первого круга взрывается).

javascript animation d3.js chained transitions
person Jason McCreary    schedule 03.04.2013    source источник
comment
Пару дней назад кто-то, кто пытался сделать то же самое, задал здесь вопрос: stackoverflow.com/questions/15692910/. Я не знаю, является ли его подход наиболее идиоматичным, но он работает (но см. мой ответ на его вопрос о рабочей ссылке jsFiddle).   -  person meetamit    schedule 03.04.2013
comment
Вместо того, чтобы явно связывать переходы в цепочку, вы также можете использовать функцию delay() для задержки запуска последующих анимаций до тех пор, пока не закончатся предыдущие.   -  person Lars Kotthoff    schedule 04.04.2013
comment
@meetamit, хотя близко, это не тот же вопрос. Мне все еще любопытно, как связать их вместе. Кажется, у него есть набор анимаций, не обязательно зависящих друг от друга.   -  person Jason McCreary    schedule 04.04.2013
comment
@ Ларс Котхофф, я посмотрю на это. Но имейте в виду, что некоторые переходы выполняются параллельно. Таким образом, задержка не обязательно будет работать по всем направлениям.   -  person Jason McCreary    schedule 04.04.2013
comment
До тех пор, пока вы можете определить, когда должен начинаться каждый переход. Если, например, ваша линия рисуется за 1 секунду, вы задержите переход, рисующий второй круг, на это время.   -  person Lars Kotthoff    schedule 04.04.2013
comment
Я получаю сообщение об ошибке при попытке добавить строку после перехода круга - object has no method 'append'. Почему бы вам не оставить краткий пример в качестве ответа, чтобы вы могли получить несколько баллов.   -  person Jason McCreary    schedule 04.04.2013

Ответы (1)


arrow_upward
23
arrow_downward

Переход легче связать, начиная с d3.v3, без использования «конца». См. примечания здесь.

Например, посмотрите на это:

rect.transition()
  .duration(500)
  .delay(function(d, i) { return i * 10; })
  .attr("x", function(d, i, j) { return x(d.x) + x.rangeBand() / n * j; })
  .attr("width", x.rangeBand() / n)
  .transition()
  .attr("y", function(d) { return y(d.y); })
  .attr("height", function(d) { return height - y(d.y); });

Это для переходов на одном и том же элементе. Другие элементы см. в этом.

// First transition the line & label to the new city.
var t0 = svg.transition().duration(750);
t0.selectAll(".line").attr("d", line);
t0.selectAll(".label").attr("transform", transform).text(city);

// Then transition the y-axis.
y.domain(d3.extent(data, function(d) { return d[city]; }));
var t1 = t0.transition();
t1.selectAll(".line").attr("d", line);
t1.selectAll(".label").attr("transform", transform);
t1.selectAll(".y.axis").call(yAxis);

Переход прикрепляется к элементу svg и привязывается оттуда.

person Biovisualize    schedule 03.04.2013
comment
У bl.ocks.org должно быть паршивое SEO. Весь день я искал связанные переходы. Спасибо за ответ. - person Jason McCreary; 04.04.2013
comment
Вы можете выполнить поиск в этой галерее: biovisualize.github.io/d3visualization/#title=Chained Переходы или использование поиска Gist, так как bl.ocks является просмотрщиком Gist - person Biovisualize; 26.04.2013
comment
Хотел бы я проголосовать за этот ответ 42 раза. Похоже, я пошел по стопам @JasonMcCreary. - person charleslparker; 03.05.2013
comment
По поводу SEO-комментариев, внимание: связанные переходы, а не переходы - person user1019696; 29.09.2014