Ежемесячный выпуск AntV G6 идет по графику. Сегодня мы выпустили версию 3.8.0. Какие новости? 「G6 Interactive Document GraphMaker」 и 「Playable TimeBar, безусловно, являются самыми важными из них. Также есть линза краевого фильтра, настраиваемый FishEye, более мощная схема определения подпрограмм JSX, оптимизация производительности и полные функции.

Интерактивный документ GraphMaker

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

Если есть небольшое движение, нажмите GraphMarker, чтобы ощутить его.

Линза с краевым фильтром: сделайте исследование более целенаправленным

Нажмите здесь , чтобы испытать.

Когда в графе имеется большое количество ребер, взаимное перекрытие и пересечение ребер делает для нас чрезвычайно трудным четко видеть некоторые из ребер внимания. Для решения этой проблемы в G6 предусмотрен плагин для линз с краевым фильтром. Использование подключаемого модуля краевого фильтра так же просто, как и всегда, просто настройте функцию фильтра или встроенные параметры фильтра при создании экземпляра.

const filterLens = new G6.EdgeFilterLens({
  // The way to move the lens
  trigger: 'drag',
  // Whether to show the label inside the lens
  showLabel: 'edge',
  // The filter option. 'one': only show the edges with one end node inside the lens;
  // 'both': show the edges with two end nodes inside the lens;
  // 'only-source': only show the edges with source node inside the lens;
  // 'only-target': only show the edges with target node inside the lens.
  type?: 'both';
  // Custom the filter function: e.g. only show the edges with 'size' larger than 3
  shouldShow: d => {
    if (d.size > 3) return true;
    return false;
  },
});

Различные временные шкалы, которые можно воспроизводить

Нажмите здесь, чтобы испытать.

Компонент TimeBar - это предварительная версия, элементы конфигурации и API-интерфейсы могут изменяться. Если вы используете его в производственной среде, пожалуйста, подумайте, мы предоставим стабильную версию в следующей версии.

Мы предоставляем три формы плагинов TimeBar:

  • TimeBar графика тренда
  • Простой TimeBar
  • Отметить TimeBar

Все они поддерживают воспроизведение диапазона / одной точки времени, ускоренную перемотку вперед, назад, регулировку скорости и другие функции. Среди них временная ось диаграммы тенденций и временная ось простой версии поддерживают однократное переключение времени и временного диапазона.

TimeBar графика тренда

Сложно ли удовлетворить спрос с помощью одной линейной диаграммы или диаграммы с областями? Вы можете рассмотреть возможность использования смешанной диаграммы. В настоящее время мы поддерживаем гистограммы, линейные диаграммы и диаграммы с областями. Мы не поддерживаем многолинейные графики.

Простой TimeBar

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

Отметить TimeBar

Ось времени типа шкалы предназначена для отображения дискретных данных времени. Каждый маленький квадрат на оси времени шкалы представляет значение шкалы. Щелкните, чтобы выбрать конкретный масштаб; перетащите ось времени, чтобы выбрать диапазон шкалы.

Конфигурация FishEye более бесплатна

Нажмите здесь, чтобы испытать.

В последней версии G6 мы запустили FishEye, плагин, предназначенный для исследования фокуса + контекста, который может гарантировать, что при увеличении масштаба интересующей области контекст и взаимосвязь между контекстом и областью фокуса будут не потеряно.

На этот раз мы сделали FishEye еще лучше! Мы добавили больше конфигураций в FishEye, что позволяет пользователям динамически изменять охват и увеличение FishEye при использовании FishEye. Пользователи могут исследовать все, что захотят.

Более мощная схема определения узла

Пожалуйста, нажмите здесь, чтобы испытать, и на документе будет поставлена ​​печать здесь.

В последней версии G6, чтобы снизить затраты на начало работы с пользовательскими узлами, мы предоставили JSX-подобный синтаксис для определения узлов. При этом к удобству добавляется множество ограничений, и значительно снижается гибкость.

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

  • Обновление Поддержка определения afterDraw, setState и других методов;
  • Атрибут next добавлен к style. Если значение равно 'inline', следующий элемент будет автоматически размещен справа от предыдущего элемента.
G6.registerNode('jsx-node', {
    jsx: cfg => `<group>
        <rect style={{
      marginLeft: 10,
      marginTop: 3,
      width: ${cfg.width},
      height: ${cfg.height},
      fill: '#fff',
      stroke: '#1890ff'
    }} name="body" >
      <rect style={{
        marginLeft: 10,
        width: ${cfg.width / 100 * cfg.used},
        height: ${cfg.height},
        fill: '#1890ff',
        stroke: '#1890ff'
      }}/>
    </rect>
  </group>`,
  setState(name: string, value: string | boolean, item: Item) {},
  afterDraw(cfg: NodeConfig) {}
})

Оптимизация производительности и функций

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

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

На основе добавления новых функций и оптимизации производительности полировка существующих функций и исправление ошибок никогда не прекращаются. С версии 3.7.0 до 3.8.0 мы оптимизировали алгоритм ломаной линии, исправив в общей сложности 20+ проблем с удобством использования и функциональных дефектов. Для более подробной информации, пожалуйста, обратитесь к G6 ChangeLog.

Вывод

В G6 3.8.0 мы внесли улучшения и оптимизацию в трех аспектах: простота использования, возможности анализа и производительность.

Чтобы пользователи могли учиться и приступать к работе быстрее и лучше, мы выпустили интерактивный документ G6 GraphMaker; чтобы упростить исследование сложных реляционных данных, мы добавили подключаемый модуль бокового фильтра и улучшили существующий подключаемый модуль FishEye; Чтобы изучить краеугольный камень данных временных рядов, мы предлагаем три различных типа временных шкал; чтобы определять узлы по низкой цене, сохраняя при этом гибкость и масштабируемость, мы оптимизировали решение с использованием JSX для определения узлов…

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

AntV G6 - это движок визуализации графиков с открытым исходным кодом, ориентированный на визуализацию графиков и анализ графиков.

Добро пожаловать, чтобы подписаться на наш GitHub и пометить его: https://github.com/antvis/G6

Официальный сайт: https://g6.antv.vision/en/