Как работает D3 и с чего начать?

За последние несколько лет библиотека Facebook React стала исключительно популярным методом создания пользовательского интерфейса, ориентированного на компоненты. Точно так же D3.js недавно стал основным стандартом для создания сложных динамических визуализаций для Интернета. D3 предоставляет разработчикам невероятный творческий контроль над тем, как они решают представлять данные, однако процесс обучения использованию этой сложной библиотеки сопряжен с многочисленными трудностями. Человека, который только знакомится с этой библиотекой, легко напугать кажущимся безграничным списком ссылок на массивный API D3 (https://github.com/d3/d3/blob/master/API.md#zooming -d3-zoom), незнакомые методы рендеринга или потрясающе сложные примеры визуализаций, найденные на основном сайте.

Хотя D3 предлагает разработчикам невероятный контроль над своими проектами, у многих пользователей нет ни времени, ни необходимости исследовать весь потенциал библиотеки. Объединение D3 с React — исключительно полезный способ создания компонентов, которые являются динамически интерактивными, а также повторно используемыми и легко интегрируемыми.

Как работает D3:

Используя широко используемые веб-стандарты SVG, HTML5 и CSS, D3 работает, загружая данные в DOM, привязывая эти данные к элементам в DOM и, в конечном счете, манипулируя этими элементами для отображения данных в богатом и интерактивном виде. Благодаря этому D3 можно использовать для создания различных проектов, от интерактивных пузырьковых диаграмм, которые расширяют элементы при нажатии, до статических круговых диаграмм, которые можно использовать для простого сравнения статистики.

Трудности использования D3 с React:

Проблема, возникающая при использовании D3 с React, возникает из-за того, что обе библиотеки стремятся контролировать DOM. Когда React нужно изменить компонент, он сначала обновляет виртуальный DOM, а затем отображает измененные элементы в реальном DOM. Основная проблема заключается в том, что элементы, которые изменяет D3, не отображаются в виртуальной модели DOM React и, следовательно, не отображаются.

Начиная:

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

Бритечарты:

Britecharts — это интуитивно понятный способ создания элементов D3 с помощью React без особого обучения. Эта библиотека диаграмм, разработанная EventBrite, получила исключительные отзывы и стала фаворитом среди новичков благодаря простому и узнаваемому синтаксису. Веб-сайт Britecharts также предлагает полезные примеры и учебные пособия, которые помогут быстро и безболезненно начать работу. Britecharts стремится решить проблему D3, связанную с его высокой сложностью и сложностью повторного использования.

D3FC:

D3FC отлично справляется с тем, чтобы сделать некоторые из более сложных возможностей построения диаграмм D3.js доступными для разработчиков, которые плохо знакомы с этой технологией. D3FC использует значительное количество фактического кода D3, и хотя эта библиотека позволяет создавать сложные декорации, адаптивную анимацию и текстурированную композицию, она также предлагает разработчику возможность реализовать функции сортировки в коде для выявления и отображения определенных тенденций. Однако с его расширенными возможностями требуется больше времени для обучения, чем для других библиотек React-D3, перечисленных на этой странице. Хотя у D3FC есть много примеров проектов на своем сайте, у них также не так много руководств, как у других библиотек, что является еще одной причиной, по которой эту технологию немного сложнее понять, чем другие.

Победа:

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

Резюме:

И React, и D3 — невероятно мощные инструменты для манипулирования DOM, и, хотя их не всегда легко использовать вместе, есть несколько библиотек, помогающих разрешить эти конфликты. В конечном счете, совместное использование этих технологий может привести к множеству интересных возможностей для создания повторно используемой динамической визуализации данных. D3 и связанные с ним библиотеки постоянно развиваются и дополняются, поэтому настоятельно рекомендуется связаться с другими людьми, заинтересованными в визуализации данных, чтобы увидеть, где может быть следующий рубеж.