После более чем двух лет итераций платформа больших данных Odeon была достаточно полна в построении базовых возможностей. За последние шесть месяцев много энергии было также вложено в визуализацию данных.В настоящее время продукт самообслуживания BI успешно запущен и стабильно работает в течение определенного периода времени.Сегодня Xiaoju поделится некоторыми нашими опыт визуализации данных.
Сегодняшний обмен в основном вращается вокругМодуль визуального макетаВ некоторых случаях модуль макета представляет собой холст с визуальными диаграммами и является одним из важных средств организации бизнес-логики для пользователей. Давайте сначала попробуемонлайн демоСм. ниже или визуализации:
Рис. 1. Отрисовки модуля визуального макета
1. Зачем разрабатывать визуальные компоненты макета?
На самом деле, будь то визуализация данных или некоторые самоиздаваемые операционные платформы, макет самообслуживания всегда был сложной проблемой. В начале проекта нас также мучила эта проблема: должны ли мы разработать несколько наборов предустановленных шаблонов для выбора пользователями или нам следует разработать набор модулей макета, которые пользователи могут перетаскивать для настройки?
Первый очень прост в реализации, и его легко очень красиво спроектировать, но ему не хватает гибкости, и его легко повторить. Последний пользователь имеет очень высокую степень свободы в использовании и может перетаскивать интерфейс, который больше соответствует его ожиданиям, но стоимость разработки относительно высока, и трудно добиться стабильности, простоты использования и высокая доступность.
Учитывая вышеуказанные проблемы, мы не удовлетворены несколькими сформулированными нами решениями и, наконец, решили реализовать компонент, который может помочь пользователям в перетаскивании макета.
2. Как мы это делаем?
После дизайна мы разобрались с моделью взаимодействия и разработали двухуровневую структуру карточек и диаграмм. На этой основе делается общий дизайн модели данных, совмещенный с приведенными выше визуализациями ионлайн демоСледующие подразделения могут быть более понятными.
Первый - синглтон в местном объемеКласс карты, используемый для описания всего макета панели мониторинга и других хранилищ данных.
С последующимКласс виджета, используется для определения информации о карте, включая размер карты, информацию о местоположении и более подробное название карты, тип карты, сноску, идентификатор карты и другую информацию.
Ну наконец тоКласс диаграммы, используемый для определения информации о диаграмме. Для того, чтобы отделить верстку от модели диаграммы, информация о диаграмме здесь размещена меньше, хранятся только необходимые поля, такие как id, а сама диаграмма реализована внешними слотами.
Рисунок 2: Модель данных
3. Как быть с взаимодействием?
Модель данных построена, и следующим шагом является разработка взаимодействия перетаскивания.
Ради отзывчивости и уменьшения случайности пользовательских операций мы отказались от пиксельной единицы в дизайне макета, но разработали виртуальное 12 деление сетки для размера узла, на которое строго ссылаются при инициализации, масштабировании и перемещении. Макет сетки.
Чтобы обеспечить удобство перетаскивания для пользователей и сохранить аккуратный макет, мы разработали процесс перерисовки карты на основе логики автоматической настройки карты, которая будет подробно описана позже.
Чтобы обеспечить лучший опыт перетаскивания, мы дополнительно разработали виртуальные карты, чтобы помочь пользователям, и пользователи могут предварительно просмотреть положение и размер карты после фиксации мыши, и эффект показан на рисунке ниже.
Рис. 3. Перетащите визуализацию предварительного просмотра
4. Какие трудности?
На самом деле, с приведенной выше моделью данных большинство трудностей было решено. Трудность в основном отражается в простоте использования вспомогательного процесса компоновки.Следующие пункты суммированы.
1. Как быть с обнаружением столкновений
Рис. 4. Процесс перерисовки схемы обнаружения столкновений
2. Как добиться эффекта автоматического потолка
В процессе разработки макета пользователь может разбивать карты на части, а в процессе обнаружения столкновений, упомянутого выше, будут затронуты и соседние карты. После начального взаимодействия я обнаружил, что пользователю требуется много времени, чтобы изменить макет во время процесса перетаскивания.Поэтому, чтобы убедиться, что макет точно расположен, должен быть метод, который может обрабатывать все подвесные карты в порядке.
Рисунок 5: Автоматический процесс перерисовки макета потолка
5. Как справиться с этими двумя проблемами?
Две трудности, упомянутые выше, существуют в двух взаимодействиях перетаскивания перемещения и масштабирования, и они логически непротиворечивы.Поэтому в процессе перетаскивания макета мы абстрагируем набор логики перерисовки в следующем порядке:
- 1. Обнаружение столкновения, найти карту, которая перекрывает текущую карту в процессе перетаскивания, и с ней может соприкасаться несколько карт;
- 2. Обведите сферу влияния, то есть, как показано в левой части рисунка 4, рекурсивно найти все карты, затронутые столкнувшейся картой, и удалить дубликаты;
- 3. Временное отречение, как показано в правой части рисунка 4, все затрагиваемые карты смещаются вниз на одинаковую величину, чтобы вместить перетаскиваемые карты;
- 4. Автоматическое всасывание потолка, как показано на рисунке 5, все карты должны быть обработаны автоматически. Логика заключается в том, что если над картой есть свободное пространство, он будет автоматически адсорбировать.
Поскольку для перетаскивания требуются эффекты предварительного просмотра в реальном времени, описанная выше четырехэтапная логика перерисовки будет часто срабатывать. Чтобы избежать многократного загрязнения данных о реальном положении в процессе раскладки, мы вводим для положения картыpreviewOffsetПоле, используемое для хранения смещения по вертикали при предварительном просмотре эффекта.
У некоторых студентов может возникнуть вопрос: вот логика бизнес-перерисовки, не будут ли такие данные высокой плотности модификации плохо работать в производительности?
На самом деле решение этой проблемыКласс виджетаВ ряде процессов обработки от обнаружения столкновений до автоматического всасывания потолка часто рассчитываются и модифицируются только относительные единицы.positionобъекта, а макет интерфейса использует абсолютные единицыscreenPositionобъект. Данные и презентация разделены и запускаются только после завершения процесса перерисовки.screenPositionТакой дизайн делает ритм обновления интерфейса более контролируемым, интерфейс более стабильным, а визуальное мерцание положения карты исключено.
Согласно этой логике перерисовки, она не только позволяет избежать избыточных накладных расходов на перерисовку слоя dom, повышает общую производительность, но также значительно повышает удобство использования макета интерфейса, а работа также становится более стабильной и плавной.
Эта статья в основном посвящена разработке интерактивной логики модуля визуального макета и не требует конкретной реализации кода.Что касается некоторых идей платформы больших данных Odeon в модуле визуального макета, я полагаю, что у вас есть предварительное понимание благодаря этой статье. .
Если вам интересны конкретные детали реализации, такие как обнаружение столкновений, обработка урожая, эффект потолка и вспомогательная компоновка, упомянутые в статье, вы можете обсудить это в частном порядке. Если возможно, я открою другую статью, чтобы обсудить это подробно. .
Ссылки по теме
- Источник статьи:Нет - двенадцатый месяц.com/blog/1663ah 2…
- Онлайн-демонстрация:Нет - двенадцатый лунный месяц.GitHub.IO/demos/chili oil…
- Исходный код модуля:[GitHub.com/no-двенадцатый месяц/демо…)