G6に基づいてデュアルツリーフローを描画するにはどうすればよいですか? | JDクラウド技術チーム

1. 背景

• ビジネスの背景: CRM システムでは、各事業ラインごとにリードをきめ細かく分散する要求が徐々に高まっており、各ラインのフロー ルールはますます複雑になり、各ラインのリード フロー ルール、さらには CRM 全体のフロー ルールが緊急に必要となります。ツリー状の可視化グラフで表現します。

• 技術的背景: 開発前に、ネイティブ キャンバス、ファブリック、G6 の 3 つのソリューションが検討されましたが、それぞれに独自の長所と短所があります。

	ネイティブキャンバス	ファブリック	G6
アドバンテージ	柔軟、無料、非常にカスタマイズ可能	キャンバスの API をカプセル化し、簡単かつ柔軟に使用できる	複雑なツリーやグラフなどのAPIが提供されており、ドキュメントに従って設定するだけで済みます。
欠点がある	開発が複雑で時間がかかる	大きなツリーやグラフなどの複雑で時間のかかる構築に。	開発前に API ドキュメントを注意深く読む必要があり、開発を始めるのが遅い

上の表の比較から、G6 にはより複雑なツリーやグラフの構築において明らかな利点があり、その後のメンテナンスやアップグレードを保証する活発なオープンソース コミュニティがあることがわかります。

2. 基礎知識

以下は、このデュアル ツリー フロー図に関するいくつかの中心的な概念です。簡単に説明します。興味がある場合は、公式 G6 API ドキュメントを読むことをお勧めします。

• グラフ

グラフは new G6.Graph(config) によってインスタンス化されます。パラメータ config はオブジェクト型グラフの設定項目であり、グラフのほとんどの機能はこの設定項目を通じてグローバルに設定できます。

ツリー グラフの場合は、新しい G6.TreeGraph メソッドを使用してインスタンス化する必要があります。

const graph = new G6.Graph({
  container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应
  // 画布宽高
  width: 800,
  height: 500,
});
// 读取数据
graph.data(data);
// 渲染图
graph.render();

• グラフ要素 - ノード

G6 の組み込みノードには、circle、rect、ellipse、ひし形、triangle、star、image、modelRect、doughnut が含まれます (v4.2.5 以降サポート)。これらの組み込みノードのデフォルト スタイルを次の図に示します。

組み込みノード構成

const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultNode: {
    type: 'circle', // 节点类型
    // ... 其他配置
  },
});

カスタムノード構成

// 在节点配置中配置自定义节点名称以及尺寸
defaultNode: {
       type: 'card-node',
       size: [338, 70],
}
// 使用G6.registerNode自定义节点，在自定义节点中可以自定义各种形状的图形，包括text等
G6.registerNode('card-node', {
        draw: function drawShape(cfg, group) {
          const w = cfg.size[0];
          const h = cfg.size[1];
          group.addShape('rect', {
            attrs: {
              x: -w / 2 - 2,
              y: -(h - 30) / 2,
              width: 6, //200,
              height: h - 30, // 60
              fill: '#3c6ef0',
              radius: [0, 4, 4, 0]
            },
            name: 'mark-box',
            draggable: true,
          });

• グラフ要素 - エッジ

G6 は 9 つの組み込みエッジを提供します。

line: 直線、制御点をサポートしません。

ポリライン: ポリライン、複数の制御点をサポートします。

円弧: 円弧線;

二次: 2 次ベジェ曲線。

cubic: 3 次ベジェ曲線。

cubic-vertical: ユーザーが外部から渡した制御点に関係なく、垂直方向の 3 次ベジェ曲線。

cubic-horizo​​ntal: ユーザーが外部から渡した制御点に関係なく、水平方向の 3 次ベジェ曲線。

ループ: 自己ループ。

組み込みエッジ構成

const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultEdge: {
    type: 'cubic',
    // 其他配置
  },
});

カスタムエッジ構成

在配置中引用自定义边
defaultEdge: {
    type: 'hvh',
    // 其他配置
  }
// 使用G6.registerEdge方法配置自定义边
G6.registerEdge('hvh', {
  draw(cfg, group) {
    const startPoint = cfg.startPoint;
    const endPoint = cfg.endPoint;
    const shape = group.addShape('path', {
      attrs: {
        stroke: '#333',
        path: [
          ['M', startPoint.x, startPoint.y],
          ['L', endPoint.x / 3 + (2 / 3) * startPoint.x, startPoint.y], // 三分之一处
          ['L', endPoint.x / 3 + (2 / 3) * startPoint.x, endPoint.y], // 三分之二处
          ['L', endPoint.x, endPoint.y],
        ],
      },
      // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
      name: 'path-shape',
    });
    return shape;
  },
});

• グラフのレイアウト - ツリーマップのレイアウト

TreeGraph のレイアウト方法の概要

CompactBox レイアウト: コンパクトなツリー レイアウト。

樹状図レイアウト: ツリー レイアウト (同じレイヤーに整列したリーフ ノード レイアウト);

インデント レイアウト: インデント レイアウト。

マインドマップ レイアウト: マインド マップ レイアウト

const graph = new G6.TreeGraph({
  container: 'mountNode',
  modes: {
    default: [
      {
        // 定义展开/收缩行为
        type: 'collapse-expand',
      },
      'drag-canvas',
    ],
  },
  // 定义布局
  layout: {
    type: 'dendrogram', // 布局类型
    direction: 'LR', // 自左至右布局，可选的有 H / V / LR / RL / TB / BT
    nodeSep: 50, // 节点之间间距
    rankSep: 100, // 每个层级之间的间距
    excludeInvisibles: true, // 布局计算是否排除掉隐藏的节点，v4.8.8 起支持
  },
});

• インタラクションとイベント

世界的なイベント

キャンバス上の範囲内で発生する限り、mousedown、mouseup、click、mouseenter、mouseleave などの操作がトリガーされます。

graph.on('click', (ev) => {
  const shape = ev.target;
  const item = ev.item;
  if (item) {
    const type = item.getType();
  }
});

キャンバスイベント

これは、canvas:mousedown、canvas:click など、canvas:eventName をイベント名として、キャンバスの空白スペースでのみトリガーされます。

graph.on('canvas:click', (ev) => {
  const shape = ev.target;
  const item = ev.item;
  if (item) {
    const type = item.getType();
  }
});

ノード/エッジ上のイベント

たとえば、node:mousedown、edge:click、combo:click などでは、イベント名として type:eventName を使用します。

graph.on('node:click', (ev) => {
  const node = ev.item; // 被点击的节点元素
  const shape = ev.target; // 被点击的图形，可根据该信息作出不同响应，以达到局部响应效果
  // ... do sth
});

graph.on('edge:click', (ev) => {
  const edge = ev.item; // 被点击的边元素
  const shape = ev.target; // 被点击的图形，可根据该信息作出不同响应，以达到局部响应效果
  // ... do sth
});

graph.on('combo:click', (ev) => {
  const combo = ev.item; // 被点击 combo 元素
  const shape = ev.target; // 被点击的图形，可根据该信息作出不同响应，以达到局部响应效果
  // ... do sth
});

3. 技術的な解決策と実装

• データの準備

データ内の各ノードには ID が必要であり、ID は文字列型である必要があります。モジュールフィールド root はルートノードを示し、右は子ノードを示し、左は親ノードを示します。flowCountList は、あるノードからあるノードへのエッジを表します。

data: {
  id: '1',
  name: '根节点',
  flowInCount: 9999,
  flowOutCount: 9999,
  currentCount: 9999,
  module: 'root',
  children: [
    {
      id: '2',
      name: '右一节点',
      flowInCount: 9999,
      flowOutCount: 9999,
      currentCount: 9999,
      module: 'son',
    },
    {
      id: '3',
      name: '左一节点',
      flowInCount: 9999,
      flowOutCount: 9999,
      currentCount: 9999,
      module: 'father',
    }
  ]
}
flowCountList: [
    {
        fromPoolId: '1',
        toPoolId: '2',
        clueCount: 111
    },
    {
        fromPoolId: '1',
        toPoolId: '3',
        clueCount: 222
    }
]

• ミニマップインスタンスを初期化する

ミニマップを追加する必要がある場合は、キャンバスの外側の div に div#minimap を追加し、その中にミニマップを配置します。次の構成のデリゲートは、パフォーマンスの損失を軽減するために、ミニマップがキャンバス内の要素のフレームのみをレンダリングすることを示しています。

const miniMap = document.getElementById('minimap');
const minimap = new G6.Minimap({
    container: miniMap,
    type: 'delegate',
    size: [178, 138]
  });

• ツリーグラフを初期化する

モードで構成されたドラッグキャンバスはキャンバスのドラッグのサポートを示し、ズームキャンバスはキャンバスのズームインおよびズームアウトのサポートを示し、ツールチップはノードへのツールチッププロンプトの追加を示します。

レイアウト内の getSide メソッドは、現在のノードが親ノードに属するか子ノードに属するかをデータ型に応じて判定しますが、このメソッドはルートノードに対してのみ有効です。

 this.graph = new G6.TreeGraph({
    container: 'clueCanvas',
    width：1000, // width和height可以根据自己画布大小进行赋值
    height：500,
    modes: {
      default: ['drag-canvas', 'zoom-canvas',{
        type: 'tooltip',
        formatText: function formatText(model) {
          return model.name;
        },
        shouldBegin: (e) => {
          const target = e.target;
          if (target.get('name') === 'title') return true;
          return false;
        },
      }],
    },
    defaultNode: {
      type: 'card-node',
      size: [338, 70],
    },
    defaultEdge: {
      type: 'custom-edge',
      style: {
        lineWidth: 4,
        lineAppendWidth: 8,
        stroke: '#BABEC7',
      }
    },
    layout: {
      type: 'mindmap',
      direction: 'H',
      getHeight: () => {return 70;}, //节点高度
      getWidth: () => {return 338;}, // 节点宽度
      getVGap: () => {return 8;}, // 节点之间的垂直间距
      getHGap: () => {return 100;}, // 节点之间的水平间距
      getSide: (d) => {
        if (d.data.module === 'father') {
          return 'left';
        }
        return 'right';
      },
    },
    plugins: [minimap]
  });
  this.graph.data(data);
  this.graph.render(); // 渲染
  this.graph.fitView(); // 全屏展示

• カスタムノード

カスタム ノードは、デフォルト ノードがニーズを満たせない場合にいくつかのグラフィック要素を定義するもので、次の図に示すように、個別または複数を組み合わせることができます。

スペースが限られているため、次のコードでは外枠と目のアイコンの描画のみを示しています。他の要素の描画も基本的に同様です。このうち、setState コールバック メソッドは、状態の変化を監視するために使用されます (この例では、ツリー ノードの展開/縮小、目のアイコンの切り替え、ノードの背景色の変更ロジックを監視します)。

G6.registerNode('card-node', {
        draw: function drawShape(cfg, group) {
          const w = cfg.size[0];
          const h = cfg.size[1];
          const shape = group.addShape('rect', {
            attrs: {
              x: -w / 2,
              y: -h / 2,
              width: w, //200,
              height: h, // 60
              radius: 8,
              fill: 'l(0) 0:rgba(197,213,255,1) 0.3:rgba(226,233,253,1) 1:rgba(255,255,255,1)',
              shadowOffsetX: -2,
              shadowOffsetY: 0,
              shadowColor: '#82A2F5',
              shadowBlur: 0,
              stroke: 'l(0) 0.1:rgba(138,169,249,1) 1:rgba(202,216,254,1)'
            },
            // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
            name: 'main-box',
            draggable: true,
          });
          cfg.children &&
            group.addShape('image', {
              attrs: {
                x: w / 2 - 35,
                y: -h / 2 + 10,
                cursor: 'pointer',
                img: flowEyeOpen,//cfg.collapsed ? flowEyeOpen : flowEyeClose,
                width: 16,
                height: 16
              },
              name: 'collapse-icon',
            });
          return shape;
        },
        setState(name, value, item) {
          if (name === 'collapsed') {
            // 替换眼睛图标
            const marker = item.get('group').find((ele) => ele.get('name') === 'collapse-icon');
            const icon = value ? flowEyeClose : flowEyeOpen;
            marker.attr('img', icon);
            // 替换卡片背景
            const mainBox = item.get('group').find((ele) => ele.get('name') === 'main-box');
            const fill = value ? '#fff' : 'l(0) 0:rgba(197,213,255,1) 0.3:rgba(226,233,253,1) 1:rgba(255,255,255,1)'
            const shadowOffsetX = value ? 0 : -2
            mainBox.attr('fill', fill)
            mainBox.attr('shadowOffsetX', shadowOffsetX)

          }
        },
      });

• ノードイベントリスナー

ノードの目のアイコンをクリックすると、展開/折りたたみが行われ、状態が更新され、再描画されます。状態が更新された後、上記の setState コールバック関数がトリガーされ、新しい展開/折りたたみ状態に応じてノード スタイルが変更されます。

this.graph.on('node:click', (e) => {
    // 点击眼睛图标展开子节点
    if (e.target.get('name') === 'collapse-icon') {
      e.item.getModel().collapsed = !e.item.getModel().collapsed;
      this.graph.setItemState(e.item, 'collapsed', e.item.getModel().collapsed);
      this.graph.layout();
    }
  });

• カスタムエッジ

側面のデフォルトのスタイルは、組み込みの側面立方体水平タイプを使用しており、マウスを側面上に移動すると、次の図に示すように数量データが表示されます。

状態がアクティブになると、エッジ上の要素の透明度を 1 に設定すると表示され、それ以外の場合は 0 に設定すると非表示になります。デフォルトは0です

G6.registerEdge(
        'custom-edge',
        {
          afterDraw(cfg, group) {
            const source = cfg.sourceNode._cfg.model.id
            const target = cfg.targetNode._cfg.model.id
            let current = self.flowCountList.find(item=>{
              return source === item.fromPoolId && target === item.toPoolId
            })
            // 如果未找到，在进行反向查一次
            if(!current) {
              current = self.flowCountList.find(item=>{
                return source === item.toPoolId && target === item.fromPoolId
              })
            }
            // 获取图形组中的第一个图形，在这里就是边的路径图形
            const shape = group.get('children')[0];
            // 获取路径图形的中点坐标
            const midPoint = shape.getPoint(0.5);
            // 在中点增加一个矩形，注意矩形的原点在其左上角
            group.addShape('rect', {
              attrs: {
                width: 92,
                height: 20,
                fill: '#BABEC7',
                stroke: '#868D9F',
                lineWidth: 1,
                radius: 10,
                opacity: 0,
                // x 和 y 分别减去 width / 2 与 height / 2，使矩形中心在 midPoint 上
                x: midPoint.x - 92/2,
                y: midPoint.y - 20/2,
              },
              name: 'edge-count', // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
            });
            group.addShape('text', {
              attrs: {
                textBaseline: 'top',
                x: midPoint.x - 92/2 + 20,
                y: midPoint.y - 12/2 + 1,
                lineHeight: 12,
                text: `流出 ${current ? current.clueCount : 0}`,
                fontSize: 12,
                fill: '#ffffff',
                opacity: 0,
              },
              name: 'edge-text',
            });
          },
          // // 响应状态变化
          setState(name, value, item) {
            if (name === 'active') {
              const edgeCount = item.get('group').find((ele) => ele.get('name') === 'edge-count');
              const edgeText = item.get('group').find((ele) => ele.get('name') === 'edge-text');
              edgeCount.attr('opacity', value ? 1 : 0)
              edgeText.attr('opacity', value ? 1 : 0)
            }
          },
        },
        'cubic-horizontal',
      );

• サイドイベントのモニタリング

エッジのmouseenterイベントとmouseleaveイベントを監視し、そのアクティブ化ステータスを更新します。

this.graph.on('edge:mouseenter', (ev) => {
    const edge = ev.item;
    this.graph.setItemState(edge, 'active', true);
  });

  this.graph.on('edge:mouseleave', (ev) => {
    const edge = ev.item;
    this.graph.setItemState(edge, 'active', false);
  });

以上で倍数レンダリングロジックの紹介を終わりますので、同じようなケースがある方はぜひ参考にしてみてください。

4.トランプルレコード

• ツリーをインデントします - 上は揃えられますが、左側のツリーは調整されません

構成は次のとおりです。 indented はインデントされたツリーを意味します。dropCap を false に設定すると、垂れ下がったツリーを閉じることを意味します。通常は右のツリーのみが表示されます。二重ツリーがレンダリングされると、左のツリーはインデントされません。これはバグです。 g6自体

layout: {
    type: 'indented',
    dropCap: false,
  },

• ツリー構造を初めてロードするときは、2 レベルまでの展開に制限されており、2 番目のレベルのノードに属性 Collapsed: true を追加するだけで済みます。データ構造は次のとおりです。

{
    id: '1',
    children: [{
        id: '1-1',
        children: [{
            id: '1-1-1',
            collapsed: true
        }]
    }]
}

• ノードにはツールチップを追加するための 2 つのローカル領域があります

const tooltip = new G6.Tooltip({
    className: 'g6-tooltip',
    offsetX: -5,
    offsetY: -165,
    getContent(e) {
      return '111'
    },
    shouldBegin(e){
      return true
    },
    itemTypes: ['node']
});
// 增加tooltip插件来实现一个节点多个局部区域增加tooltip
plugins: [tooltip,tooltip1]

• コンパイルエラーに関する質問

ローカル ts のバージョンが低すぎるため、g6 のコードをチェックするときに ts がエラーを報告しました。具体的なエラー メッセージは次のとおりです。

原因分析:

g6 コードベースは ts の高度な構文を使用しているため、現在の低バージョンの ts はそれをチェックできません。

解決：

(1). tsconfig.json: true に「skipLibCheck」を追加して ts チェックをスキップしますが、テスト環境とプレリリース環境は正常にコンパイルされ、オンラインになるときに npm run ビルドがコンパイルに失敗することがわかりました。

(2). ts のバージョンをアップグレードし、現在使用している 3.5.3 を最新バージョンにアップグレードすると、上記の問題は解決されましたが、システムの他の場所でエラーが報告されていることがわかりました。オンラインではこの方法は廃止されました

(3). @antv/g6 のバージョンを最新版から 4.3.4 にダウングレードすると、最終的には実行可能で、コンパイルも問題なく、関数も正常に動作することがわかりました。 antv/g6 のすべてのバージョンについてのアップグレードではこの問題について言及されていなかったため、バージョンに従ってテストする必要があり、このバージョンを見つけるのに丸 1 日かかりました。将来この問題に遭遇した場合、そこから学ぶことができます

5. 実績表示

• グローバル表示

• 部分表示

著者: JD Logistics Tian Leilei

出典: JD Cloud 開発者コミュニティ

{{名前}}

{{名前}}