D3 переходы - пауза и возобновление

Question

Я пытаюсь понять «пауза» и «возобновить» для переходов D3 из этого guide. Хотя я понимаю, как работает «пауза», я немного теряюсь, когда дело доходит до «возобновления». Я не мог понять смысл автора, в частности, «линейное» или первое резюме резюме. Мой вопрос: e.attr("T",0); и .attr("T",1); делать точно?

Я подаю функциональность резюме для ползунка для видео или сигнала, например здесь: jsfiddle

Answer 1

Код e.attr("T",0) и .attr("T",1) наборы атрибутов для узла, который был выбран. То есть создается и устанавливается новый атрибут «Т». Цель этого заключается исключительно в том, чтобы облегчить остановку и возобновление - 0 представляет собой переход до начала и 1 в конце.

Если этот атрибут включен в переход, значение будет постепенно изменяться с 0 на 1. Как указывает автор учебника, это может быть использовано для получения состояния перехода в любой момент времени - вам просто нужно запросить значение «T». Если вы также сохраните конкретный переход, вы можете использовать значение для приостановки и возобновления в любой момент.

Обратите внимание, что нет ничего особенного в отношении «Т». Вы можете использовать любое (неиспользованное) имя атрибута. Цель состоит в том, чтобы иметь какой-то способ рассказать, как далеко продвинулся переход.

Answer 2

Я тоже борется с этой точной проблемой, и я думаю, что на примере, который меня отбрасывал, есть опечатка. Если автор пишет:

var e = d3.select("#time"); 
e.attr("T",0); 

c.transition() 
    .duration(time) 
    .ease("linear") 
    .attr("T",1); 

Кажется, что e будет обновлять свой атрибут T, как c переходов, которые не имеют смысла. Вместо этого я думаю, что это должно быть следующим:

var e = d3.select("#time"); 
e.attr("T",0); 

e.transition() 
    .duration(time) 
    .ease("linear") 
    .attr("T",1); 

Теперь мы выбираем #time элемент, установить начальное значение его атрибута 0T затем добавить переход на тот же элемент, который изменяет T к 1 в течение указанная продолжительность.