ミニプログラムでマインドマップを描く方法

インストール @antv/f6 @antv/f6-alipay -S

エクスポートデフォルト{
  id: 'モデリング方法'、
  子供たち： [
    {
      id: '分類',
      子供たち： [
        {
          id: 'ロジスティック回帰'、
        },
        {
          id: '線形判別分析'、
        },
        {
          id: 'ルール',
        },
        {
          id: '決定木'、
        },
        {
          id: 'ナイーブベイズ'、
        },
        {
          id: 'K 近傍'、
        },
        {
          id: '確率的ニューラルネットワーク'、
        },
        {
          id: 'サポートベクターマシン',
        },
      ]、
    },
    {
      id: 'コンセンサス'、
      子供たち： [
        {
          id: 「多様性をモデル化する」
          子供たち： [
            {
              id: '異なる初期化'、
            },
            {
              id: '異なるパラメータの選択',
            },
            {
              id: '異なるアーキテクチャ'、
            },
            {
              id: 'さまざまなモデリング方法'、
            },
            {
              id: '異なるトレーニング セット'、
            },
            {
              id: '異なる機能セット'、
            },
          ]、
        },
        {
          id: 'メソッド',
          子供たち： [
            {
              id: '分類子の選択',
            },
            {
              id: '分類子の融合',
            },
          ]、
        },
        {
          id: '共通',
          子供たち： [
            {
              id: 'バギング'、
            },
            {
              id: 'ブースティング',
            },
            {
              id: 'AdaBoost',
            },
          ]、
        },
      ]、
    },
    {
      id: '回帰'、
      子供たち： [
        {
          id: '多重線形回帰'、
        },
        {
          id: '部分最小二乗法',
        },
        {
          id: 「多層フィードフォワードニューラルネットワーク」、
        },
        {
          id: '一般回帰ニューラルネットワーク'、
        },
        {
          id: 'サポートベクター回帰',
        },
      ]、
    },
  ]、
};

{
  "defaultTitle": "マインドマップ",
  "コンポーネントの使用": {
    "f6-canvas": "@antv/f6-alipay/es/container/container"
  }
}

'@antv/f6' から F6 をインポートします。
'@antv/f6/dist/extends/graph/treeGraph' から TreeGraph をインポートします。
'../../../common/utils/context' から { wrapContext } をインポートします。

'./data' からデータをインポートします。

/**
 * マインドマップ - ノードを両側に自動的に分配します*/

ページ（{
  キャンバス: null、
  ctx: null、
  renderer: '', // mini、mini-native など、F6 で必要、環境をマーク isCanvasInit: false, // キャンバスは準備ができていますか? graph: null,

  データ： {
    幅: 375,
    高さ: 600,
    ピクセル比: 2,
    強制ミニ: 偽、
  },

  オンロード() {
    // カスタム ツリー、ノードなどを登録します。F6.registerGraph('TreeGraph', TreeGraph);

    // ウィンドウの幅と高さを同期的に取得します。const { windowWidth, windowHeight, PixelRatio } = my.getSystemInfoSync();

    this.setData({
      幅: ウィンドウ幅、
      高さ: ウィンドウの高さ、
      ピクセル比、
    });
  },

  /**
   * cnavasコールバックを初期化し、取得したコンテキストをキャッシュする
   * @param {*} ctx 描画コンテキスト
   * @param {*} rect の幅と高さの情報 * @param {*} canvas キャンバスオブジェクト、レンダリングが mini の場合は null
   * @param {*} レンダラーはキャンバス 1.0 またはキャンバス 2.0、mini | mini-native を使用します
   */
  handleInit(ctx, rect, キャンバス, レンダラー) {
    true を返します。
    this.ctx = wrapContext(ctx);
    this.renderer = レンダラー;
    this.canvas = キャンバス;
    this.updateChart();
  },

  /**
   * キャンバスによってディスパッチされたイベントはグラフインスタンスに転送されます*/
  ハンドルタッチ(e) {
    this.graph && this.graph.emitEvent(e);
  },

  チャートを更新します（）{
    const { 幅、高さ、ピクセル比 } = this.data;

    // F6インスタンスを作成する this.graph = new F6.TreeGraph({
      コンテキスト: this.ctx、
      レンダラー: this.renderer、
      幅、
      身長、
      ピクセル比、
      fitView: true、
      モード:
        デフォルト： [
          {
            タイプ: '折りたたみ-展開'、
            onChange: 関数 onChange(item, 折りたたまれた) {
              定数モデル = item.getModel();
              model.collapsed = 折りたたまれている;
              true を返します。
            },
          },
          「ドラッグキャンバス」、
          「ズームキャンバス」、
        ]、
      },
      デフォルトノード: {
        サイズ: 26,
        アンカーポイント: [
          [0, 0.5],
          [1, 0.5],
        ]、
      },
      デフォルトエッジ: {
        タイプ: 'cubic-horizo​​ntal'、
      },
      レイアウト:
        タイプ: 'マインドマップ'、
        方向: 'H'、
        getHeight: 関数 getHeight() {
          16を返します。
        },
        getWidth: 関数 getWidth() {
          16を返します。
        },
        getVGap: 関数 getVGap() {
          10 を返します。
        },
        getHGap: 関数 getHGap() {
          50を返します。
        },
      },
    });
    centerX = 0 とします。
    this.graph.node(function(node) {
      if (node.id === 'モデリング方法') {
        中心X = ノード.x;
      }

      // 位置の値（ESlint はネストされた三項式を禁止しているため、抽出されて別々に記述されます）
      position_value を null にします。
      （ノードの子とノードの子の長さ＞0）の場合{
        position_value = '左';
      } そうでない場合 (node.x > centerX) position_value = 'right';
      そうでない場合は、position_value = 'left';

      戻る {
        ラベル: node.id,
        ラベル設定: {
          オフセット: 5,
          位置: 位置値、
        },
      };
    });

    this.graph.data(データ);
    this.graph.render();
    グラフにフィットするビューを作成します。
  },
});

<f6-キャンバス
  幅="{{幅}}"
  高さ="{{高さ}}"
  フォースミニ="{{フォースミニ}}"
  ピクセル比="{{ピクセル比}}"
  onTouchEvent="handleTouch"
  onInit="handleInit"
</f6-キャンバス>

npm インストール @antv/f6-wx -S

{
  "defaultTitle": "マインドマップ",
  "コンポーネントの使用": {
    "f6-canvas": "@antv/f6-wx/canvas/canvas"
  }
}

<f6-キャンバス
  幅="{{幅}}"
  高さ="{{高さ}}"
  フォースミニ="{{フォースミニ}}"
  ピクセル比="{{ピクセル比}}"
  バインド:onTouchEvent="handleTouch"
  バインド:onInit="handleInit"
</f6-キャンバス>

'@antv/f6-wx' から F6 をインポートします。
'@antv/f6-wx/extends/graph/treeGraph' から TreeGraph をインポートします。


'./data' からデータをインポートします。

/**
 * マインドマップ - ノードを両側に自動的に分配します*/

ページ（{
  キャンバス: null、
  ctx: null、
  renderer: '', // mini、mini-native など、F6 で必要、環境をマーク isCanvasInit: false, // キャンバスは準備ができていますか? graph: null,

  データ： {
    幅: 375,
    高さ: 600,
    ピクセル比: 1,
    強制ミニ: 偽、
  },

  オンロード() {
    // カスタム ツリー、ノードなどを登録します。F6.registerGraph('TreeGraph', TreeGraph);

    // ウィンドウの幅と高さを同期的に取得します。const { windowWidth, windowHeight, PixelRatio } = wx.getSystemInfoSync();

    this.setData({
      幅: ウィンドウ幅、
      高さ: ウィンドウの高さ、
      // ピクセル比、
    });
  },

  /**
   * cnavasコールバックを初期化し、取得したコンテキストをキャッシュする
   * @param {*} ctx 描画コンテキスト
   * @param {*} rect の幅と高さの情報 * @param {*} canvas キャンバスオブジェクト、レンダリングが mini の場合は null
   * @param {*} レンダラーはキャンバス 1.0 またはキャンバス 2.0、mini | mini-native を使用します
   */
  handleInit(イベント) {
    const {ctx、rect、canvas、renderer} = イベント.detail
    true を返します。
    this.ctx = ctx;
    this.renderer = レンダラー;
    this.canvas = キャンバス;
    this.updateChart();
  },

  /**
   * キャンバスによってディスパッチされたイベントはグラフインスタンスに転送されます*/
  ハンドルタッチ(e) {
    this.graph && this.graph.emitEvent(e.detail);
  },

  チャートを更新します（）{
    const { 幅、高さ、ピクセル比 } = this.data;

    // F6インスタンスを作成する this.graph = new F6.TreeGraph({
      コンテキスト: this.ctx、
      レンダラー: this.renderer、
      幅、
      身長、
      ピクセル比、
      fitView: true、
      モード:
        デフォルト： [
          {
            タイプ: '折りたたみ-展開'、
            onChange: 関数 onChange(item, 折りたたまれた) {
              定数モデル = item.getModel();
              model.collapsed = 折りたたまれている;
              true を返します。
            },
          },
          「ドラッグキャンバス」、
          「ズームキャンバス」、
        ]、
      },
      デフォルトノード: {
        サイズ: 26,
        アンカーポイント: [
          [0, 0.5],
          [1, 0.5],
        ]、
      },
      デフォルトエッジ: {
        タイプ: 'cubic-horizo​​ntal'、
      },
      レイアウト:
        タイプ: 'マインドマップ'、
        方向: 'H'、
        getHeight: 関数 getHeight() {
          16を返します。
        },
        getWidth: 関数 getWidth() {
          16を返します。
        },
        getVGap: 関数 getVGap() {
          10 を返します。
        },
        getHGap: 関数 getHGap() {
          50を返します。
        },
      },
    });
    centerX = 0 とします。
    this.graph.node(function(node) {
      if (node.id === 'モデリング方法') {
        中心X = ノード.x;
      }

      // 位置の値（ESlint はネストされた三項式を禁止しているため、抽出されて別々に記述されます）
      position_value を null にします。
      （ノードの子とノードの子の長さ＞0）の場合{
        position_value = '左';
      } そうでない場合 (node.x > centerX) position_value = 'right';
      そうでない場合は、position_value = 'left';

      戻る {
        ラベル: node.id,
        ラベル設定: {
          オフセット: 5,
          位置: 位置値、
        },
      };
    });

    this.graph.data(データ);
    this.graph.render();
    グラフにフィットするビューを作成します。
  },
});