Это часть серии статей, посвященных проблемам Advent of Code 2020. Вы можете увидеть список всех проблем, о которых мы писали здесь.

Если вы являетесь поклонником AoC и получили удовольствие от работы над этими проблемами, вполне вероятно, что вы хорошо впишетесь в нашу команду. Наша команда инженеров была в восторге от этого, поскольку мы любим решать сложные проблемы. Если вам нравится то, что вы видите, мы постоянно ищем большие таланты, пожалуйста, присоединяйтесь к нам!

Задача на 3-й день заключалась в подсчете количества деревьев, на которых тобогганы спускались с холма. Это было относительно просто, поэтому, решая ее, я решил оживить путь наших тобогганов. Visx - это выбранный способ отображения данных, который представляет собой отличную библиотеку построения диаграмм для React на основе D3.js.

Решение задачи

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

Ради задачи мы можем вернуть количество совпадающих деревьев. Но зачем останавливаться на достигнутом ?!

Построение деревьев

Теперь нам нужно сгенерировать координаты для каждого из деревьев, имея в виду, что тот же шаблон повторяется, когда достигается конец.

visx использует такие переменные, как шкалы x и y, чтобы сопоставить точку в наших данных с местоположением пикселя на SVG. Вы можете прочитать об этом подробнее здесь, но он позволяет легко создавать несколько компонентов на одном графике, таких как сетки, оси и многое другое. Здесь мы просто собираемся создать SVG и группу для размещения наших деревьев и тобогганов:

Это даст нам несколько очень простых деревьев:

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

Анимация линий

Теперь самое интересное.

Сначала нам нужно их построить, и для этого я использовал LinePath из visx:

Но как оживить линию, которая на самом деле представляет собой набор статических точек? Интерполяция значений x и y затруднена.

Для этого нужно использовать свойство SVG stroke-dasharray. Вы можете прочитать об этом подробнее здесь, но в качестве обзора мы хотим сделать размер черточки равным или большим, чем размер линии, сместить черту так, чтобы сначала мы не могли видеть линию, затем интерполируйте значения штрих-тире, чтобы линия выглядела так, как будто она движется. Это работает под капотом, поскольку visx использует пути SVG для создания линий, которые мы видим. Для интерполяции значений смещения я решил использовать реакцию-движение, но еще одна замечательная особенность visx заключается в том, что он не зависит от анимации - используйте любую анимацию из библиотеки, которая вам больше нравится!

Итак, в приведенном выше примере компонент «Движение» перейдет от заданного по умолчанию смещения штриха и будет постоянно передавать новые значения в строку, создавая впечатление, что линия движется. Крутая вещь.

Вы можете проверить это на codepen!

Хотя это было полезно, чтобы узнать, как анимировать линию вязкости, конечный продукт мало что нам говорит. Однако в nPlan мы все время делаем содержательные представления данных. Если вам интересно, может быть, вы подумаете о присоединении? И если вам понравились испытания AoC, мы также написали о других статьях этой серии.