Как нарисовать дендрограмму в апплете

предисловие

Существующие технологии визуализации графов на мобильной стороне включают F2 и F6 в Antv. F2 в основном фокусируется на статистических графиках для анализа данных, а F6 фокусируется на графиках, связанных с различными сценариями. Оба имеют свою направленность. F6 — это простой, удобный в использовании и полный мобильный механизм визуализации графов.На основе широких возможностей настройки он предоставляет ряд элегантных и простых в использовании решений для визуализации графов. Это может помочь разработчикам создавать свои собственные приложения для визуализации графиков, анализа графиков или редактора графиков. Если вы хотите вывести содержимое в виде блок-схемы, карты знаний, карты разума и т. д. и надеетесь легко управлять картой, то рекомендуется попробовать F6.

Добро пожаловать, чтобы отметить и отправить проблему

github.com/antvis/F6

Что такое древовидная карта?

Древовидная диаграмма представлена в следующем виде:

Конкретные принципы см.ЭМР. В это время. ИИТ. Квота/~Re ing old/He…, который непрерывно выводится из корневого узла для формирования древовидной структуры, что является методом визуализации, который может хорошо выражать иерархические отношения. Например: Kapture 2021-09-22 at 23.40.34.gif

В каком сценарии используется

имя	заявление
Дерево декомпозиции	В обследовании населения разбивка выборки населения на демографическую информацию
Дерево характеристик критического качества	Преобразование потребностей клиентов в измеримые параметры и технологические характеристики продуктов
дерево решений или логическая схема	Планирование мыслительных процессов для облегчения принятия решений
иллюстрация ствола дерева	Используется для определения характеристик продукта на этапе проектирования и разработки продукта.
анализ дерева отказов	Выявление возможных причин сбоев
сборочный чертеж	В процессе производства, изображающий сборку компонентов продукта.
Метод - Диаграмма метода	Решать проблему
анализ работы или задачи	Определение требований работы или задачи
Организационная структура	Определите уровень связи между управлением и отчетностью
Диаграмма процедуры принятия решения о процессе	Выявление потенциальных проблем и контрмер в сложных планах
Дерево измерения требований	Определите клиентов, потребности и измерения измеряемых продуктов или услуг
причинно-следственная диаграмма или пять почему	Определите основную причину проблемы
Структура классификации продукции (WBS)	Определите все аспекты проекта, разбитые на конкретные уровни пакета работ.

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

Как рисовать в F6

Демонстрационные примеры могут относиться кПост 6. Нажмите TV.vision/this/docs/отвратительно...Код в этом разделе был с открытым исходным кодом, если вам интересно, вы можете просмотреть его

AlipayGitHub.com/ant vis/F6/he…
WeChatGitHub.com/ant vis/F6/he…

Alipay

Установить первым

npm install @antv/f6 @antv/f6-alipay -S

index.json

{
  "defaultTitle": "紧凑树",
  "usingComponents": {
    "f6-canvas": "@antv/f6-alipay/es/container/container"
  }
}

index.js

import F6 from '@antv/f6';
import TreeGraph from '@antv/f6/dist/extends/graph/treeGraph';

import data from './data.js';

/**
 * 紧凑树
 */

Page({
  canvas: null,
  ctx: null, // 延迟获取的2d context
  renderer: '', // mini、mini-native等，F6需要，标记环境
  isCanvasInit: false, // canvas是否准备好了
  graph: null,

  data: {
    width: 375,
    height: 600,
    pixelRatio: 2,
    forceMini: false,
  },

  onLoad() {
    // 注册自定义树，节点等
    F6.registerGraph('TreeGraph', TreeGraph);

    // 同步获取window的宽高
    const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync();

    this.setData({
      width: windowWidth,
      height: windowHeight,
      pixelRatio,
    });
  },

  /**
   * 初始化canvas回调，缓存获得的context
   * @param {*} ctx 绘图context
   * @param {*} rect 宽高信息
   * @param {*} canvas canvas对象，在render为mini时为null
   * @param {*} renderer 使用canvas 1.0还是canvas 2.0，mini | mini-native
   */
  handleInit(ctx, rect, canvas, renderer) {
    this.isCanvasInit = true;
    this.ctx = ctx;
    this.renderer = renderer;
    this.canvas = canvas;
    this.updateChart();
  },

  /**
   * canvas派发的事件，转派给graph实例
   */
  handleTouch(e) {
    this.graph && this.graph.emitEvent(e);
  },

  updateChart() {
    const { width, height, pixelRatio } = this.data;

    // 创建F6实例
    this.graph = new F6.TreeGraph({
      context: this.ctx,
      renderer: this.renderer,
      width,
      height,
      pixelRatio,
      fitView: true,
      modes: {
        default: [
          {
            type: 'collapse-expand',
            onChange: function onChange(item, collapsed) {
              const model = item.getModel();
              model.collapsed = collapsed;
              return true;
            },
          },
          'drag-canvas',
          'zoom-canvas',
        ],
      },
      defaultNode: {
        size: 26,
        anchorPoints: [
          [0, 0.5],
          [1, 0.5],
        ],
      },
      defaultEdge: {
        type: 'cubic-horizontal',
      },
      layout: {
        type: 'compactBox',
        direction: 'LR',
        getId: function getId(d) {
          return d.id;
        },
        getHeight: function getHeight() {
          return 16;
        },
        getWidth: function getWidth() {
          return 16;
        },
        getVGap: function getVGap() {
          return 10;
        },
        getHGap: function getHGap() {
          return 100;
        },
      },
    });

    this.graph.node(function(node) {
      return {
        label: node.id,
        labelCfg: {
          offset: 10,
          position: node.children && node.children.length > 0 ? 'left' : 'right',
        },
      };
    });

    this.graph.data(data);
    this.graph.render();
    this.graph.fitView();
  },
});

index.axml

<f6-canvas
  width="{{width}}"
  height="{{height}}"
  forceMini="{{forceMini}}"
  pixelRatio="{{pixelRatio}}"
  onTouchEvent="handleTouch"
  onInit="handleInit"
></f6-canvas>

WeChat

Установить первым

npm install @antv/f6-wx -S

@antv/f6-wxТак как WeChat не очень дружит с пакетами npm, мы инкапсулировали@antv/f6-wxПомогите пользователям упростить операции.

index.json

{
  "defaultTitle": "紧凑树",
  "usingComponents": {
    "f6-canvas": "@antv/f6-wx/canvas/canvas"
  }
}

index.wxml

<f6-canvas
  width="{{width}}"
  height="{{height}}"
  forceMini="{{forceMini}}"
  pixelRatio="{{pixelRatio}}"
  bind:onTouchEvent="handleTouch"
  bind:onInit="handleInit"
></f6-canvas>

index.js

import F6 from '@antv/f6-wx';
import TreeGraph from '@antv/f6-wx/extends/graph/treeGraph';

import data from './data.js';
Page({
  canvas: null,
  ctx: null, // 延迟获取的2d context
  renderer: '', // mini、mini-native等，F6需要，标记环境
  isCanvasInit: false, // canvas是否准备好了
  graph: null,

  data: {
    width: 375,
    height: 600,
    pixelRatio: 2,
    forceMini: false,
  },

  onLoad() {
    // 注册自定义树，节点等
    F6.registerGraph('TreeGraph', TreeGraph);
    // 同步获取window的宽高
    const { windowWidth, windowHeight, pixelRatio } = wx.getSystemInfoSync();

    this.setData({
      width: windowWidth * pixelRatio,
      height: windowHeight * pixelRatio,
      pixelRatio,
    });
  },

  /**
   * 初始化canvas回调，缓存获得的context
   * @param {*} ctx 绘图context
   * @param {*} rect 宽高信息
   * @param {*} canvas canvas对象，在render为mini时为null
   * @param {*} renderer 使用canvas 1.0还是canvas 2.0，mini | mini-native
   */
  handleInit(event) {
    const { ctx, rect, canvas, renderer } = event.detail;
    this.isCanvasInit = true;
    this.ctx = ctx;
    this.renderer = renderer;
    this.canvas = canvas;
    this.updateChart();
  },

  /**
   * canvas派发的事件，转派给graph实例
   */
  handleTouch(e) {
    this.graph && this.graph.emitEvent(e.detail);
  },

  updateChart() {
    const { width, height, pixelRatio } = this.data;

    // 创建F6实例
    this.graph = new F6.TreeGraph({
      context: this.ctx,
      renderer: this.renderer,
      width,
      height,
      pixelRatio,
      fitView: true,
      modes: {
        default: [
          {
            type: 'collapse-expand', // 点击后展开/收缩
            onChange: function onChange(item, collapsed) {
              const model = item.getModel();
              model.collapsed = collapsed;
              return true;
            },
          },
          'drag-canvas',
          'zoom-canvas',
        ],
      },
      defaultNode: {
        size: 26,
        anchorPoints: [
          [0, 0.5],
          [1, 0.5],
        ],
      },
      defaultEdge: {
        type: 'cubic-horizontal',
      },
      layout: {
        type: 'compactBox',
        direction: 'LR',
        getId: function getId(d) {
          return d.id;
        },
        getHeight: function getHeight() {
          return 16;
        },
        getWidth: function getWidth() {
          return 16;
        },
        getVGap: function getVGap() {
          return 10;
        },
        getHGap: function getHGap() {
          return 100;
        },
      },
    });

    this.graph.node(function(node) {
      return {
        label: node.id,
        labelCfg: {
          offset: 10,
          position: node.children && node.children.length > 0 ? 'left' : 'right',
        },
      };
    });

    this.graph.data(data);
    this.graph.render();
    this.graph.fitView();
  },
});

резюмировать

Понимание концепции TreeGraph в F66. Нажмите TV.vision/this/docs/api…
Будут некоторые различия между апплетом WeChat и Alipay.

Добро пожаловать к нам

Добро пожаловать, чтобы отметить и отправить проблему

github.com/antvis/F6

Если вас интересует древовидная диаграмма или визуализация диаграммы, вы можете добавить мой WeChatopenwayneВойдите в нашу группу WeChat.