F6: Мобильная среда визуализации графов на TypeScript

Что такое F6

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

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

Мощные анимации и взаимодействия

Мощная компоновка -->

Особенности

• Множество встроенных элементов: узлы и рёбра с бесплатными конфигурациями;
• Управляемые взаимодействия: более 10 основных моделей поведения при взаимодействии;
• Мощная компоновка: более 10 алгоритмов компоновки;
• Удобные компоненты: выдающиеся возможности и производительность;
• Удобный пользовательский интерфейс: полные документы для разных уровней требований пользователей. Поддерживается TypeScript.

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

Установка

$ npm install @antv/f6

Использование

• демо

import F6 from "@antv/f6";
import graphData from "./data";
import dagreLayout from "@antv/f6/dist/extends/layout/dagreLayout";
import TreeGraph from "@antv/f6/dist/extends/graph/treeGraph";

F6.registerLayout("dagreLayout", dagreLayout);
F6.registerGraph("TreeGraph", TreeGraph);

Page({
  data: {
    width: 300,
    height: 400,
    pixelRatio: 1,
  },
  onLoad() {
    const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync();
    this.setData({
      width: windowWidth,
      height: windowHeight,
      pixelRatio: pixelRatio,
    });
  },
  onCanvasInit(ctx, rect, canvas, renderer) {
    this.graph = new F6.TreeGraph({
      context: ctx,
      renderer,
      width: this.data.width,
      height: this.data.height,
      linkCenter: true,
      modes: {
        default: ["drag-canvas", "zoom-canvas"],
      },
      defaultNode: {
        size: 40,
      },
      layout: {
        type: "compactBox",
        direction: "RL",
        getId: function getId(d) {

*Здесь текст обрывается.*