Работая разработчиком программного обеспечения в GreyOrange, я занимался работой, которая до сих пор ставила под сомнение и определяла мой путь. Один из них, который мне больше всего понравился, - это визуализация дерева процесса принятия решений. Я почти уверен, что есть библиотеки, которые сделали то же самое гораздо эффективнее, чем я мог надеяться достичь на этом уровне моей карьеры. Однако создание его прямо из строительных блоков было потрясающим опытом, а также возродило мою веру в использование структур данных в реальном профессиональном развитии.
Задача, которую нужно было решить, была довольно простой. Отображение дерева решений для поддержки изменения его структуры и т. Д. Однако проблема заключалась в формате, в котором данные поступали из API. Он был представлен в виде дерева для потребления. Также после синтаксического анализа мне нужно было отобразить его в формате, который можно было бы легко использовать для различных функциональных групп, использующих Продукт. В D3 есть отличный плагин для этого, принудительный график, однако мне нужно было постоянно согласованное представление, и, к сожалению (или к счастью), это было не так.
Поэтому пришло время для большой работы. Первым в этой серии было создание графа из дерева. Это было достигнуто в два этапа:
- Проанализируйте дерево, чтобы получить все узлы и ребра. Это было сделано итеративно с использованием стека. Проблема, которую все мы много решали при подготовке к собеседованию. Также было два типа узлов, один из которых имеет только один дочерний элемент, а другой является состоянием принятия решения с несколькими дочерними элементами. Небольшая разница, но все же разница.
- Следите за всеми подключениями к узлу и за ним. Это было сделано для того, чтобы включить CRUD для ссылок. (Совершенно необязательно для части просмотра)
Второй заключался в вычислении расстояний и положений узлов и ребер. Для этого я использовал плагин вместо того, чтобы просто переписывать код, известный как d3-sankey. Спасибо Майку Бостоку за этот замечательный плагин, а также за D3. Надеюсь, что когда-нибудь сможет внести свой вклад в D3. Я также присвоил значение 1 всем значениям ребер и узлов, чтобы сохранить согласованную высоту узлов и ребер соответственно.
Затем я работал над CRUD-частью узла, и это была довольно простая задача с использованием Redux. Спасибо Дэну Абрамову за то же самое. Просто различные фильтры по узлам и ребрам, соответствующим узлам и ребрам.
В этом проекте мне нравились еще кое-что, но ничего, что было связано с просмотром:
- Обратный синтаксический анализ дерева от узлов и ребер для отправки обратно в API при обновлении
- Регулярное выражение, чтобы разбить имена узлов, чтобы они соответствовали символам, которые я создавал для каждого узла.
На моем предстоящем посту младшего специалиста по SDE в Expedia я надеюсь продолжить заниматься еще более интересными проектами и исследовать новые работы, происходящие в области внешнего интерфейса.
