Каково точное значение этой фразы в D3.js Path Transitions

Question

При просмотре документов, содержащих линейные диаграммы с использованием D3.js, я наткнулся на эту страницу от создателя D3.js. В этом article он объясняет, как сделать диаграмму движущейся линии в D3.js, и где-то в середине статьи он упоминает об этом:

старый путь имел три контрольные точки, а новый путь имеет три контрольные точки, так что наивный подход интерполировать каждый пункт управления от старого к новому:

⟨0,0⟩ ↦ ⟨0,6⟩

⟨1,6⟩ ↦ ⟨1,4⟩

⟨2,4⟩ ↦ ⟨2,5⟩

Поскольку изменяются только значения y, эта интерпретация приводит к вертикальному покачиванию. Когда вы указываете D3 на переход между двумя путями, он принимает именно этот простой подход: он находит числа, встроенные в связанные строки данных пути, пар их по порядку и интерполирует. Таким образом, переход интерполирует шесть чисел (для трех контрольных точек) и производит такое же колебание.

Чтобы устранить вибрацию, интерполируйте преобразование, а не путь. Это имеет смысл, если вы думаете о диаграмме как визуализации функции - ее значение не меняется, мы просто показываем другую часть домена. Перемещая видимое окно с той же скоростью, что приходит новые данные, мы можем легко отображать в реальном времени данные:»

Что он имеет в виду „интерполировать Transform, а не путь“

? если значения осей X одинаковы для последовательных выборок (что может произойти, если значения оси х движутся в миллисекундах, но нам нужно отправить только «minutes.seconds», как мы можем удалить вертикальное колебание?

Я спрашиваю, потому что я столкнулся с этой же проблемой в другом наборе инструментов (jqplot), и здесь тики должны отображаться в «minutes.seco» nds ", но данные по оси x отбираются в миллисекундах, поэтому при преобразовании их в« minutes.seconds »mutliple xaxis points создаются с разными значениями оси y, а так как данные« сдвинуты »с левой стороны, я вижу неровное вертикальное вихрь в моей диаграмме.

Может ли кто-нибудь объяснить, пожалуйста, как избавиться от этих кратных значений оси Y от того же ограничения по значению по оси Х.

Answer 1

В статье содержится ответ на ваш вопрос. Она обеспечивает код, чтобы продемонстрировать поведение, описанное:

// redraw the line, and then slide it to the left 
path 
    .attr("d", line) 
    .attr("transform", null) 
    .transition() 
    .attr("transform", "translate(" + x(-1) + ")"); 

Этот фрагмент кода относится переход к преобразованию атрибута элемента строки SVG. Другой подход был бы применить переход к самой линии (как это staded ранее в тексте):

// transition the line 
path.transition().attr("d", line); 

Первый фрагмент кода перемещает всю линию в направлении оси х, а второй фрагмент кода перемещает точки, линия состоит из направления y (через функцию линии().