Antv-x6 の使用方法と概要 | 京東物流技術チーム

1 はじめに

AntV は、グラフやその他のグラフィックを簡単に作成できるデータ視覚化 ( https://so.csdn.net/so/search?q=%E6%95%B0%E6%8D%AE%E5%8F%AF%E8%A7%86%E5%8C%96&spm=1001.2101.3001.7020 ) ツール ( https://antv.vision/zh/ ) です。ページ開発により、データの視覚化が容易になります。Web サイトに入ると、7 つのモジュールが表示されます。

G2: データ駆動型で非常に使いやすく、スケーラブルなビジュアルグラフィックス文法 S2: すぐに使える多次元ビジュアル分析テーブル G6: 便利なリレーショナルデータ視覚化エンジン
および
グラフ分析ツール X6: 非常に
カスタマイズ可能ですぐに使えるデータ駆動型グラフ編集エンジン L7: 高性能、高レンダリング品質の地理空間データ視覚化フレームワーク F2 : H5/アプレット/Weex などと互換性のあるモバイル側の視覚化ソリューションに焦点を当てるマルチエンド環境 AVA : AVA は視覚的な分析フレームを容易にするために生まれ
た
テクノロジー
です

2 インストール

npm または Yarn コマンドを使用して x6 をインストールする

# npm
$npm install @anv/x6 --save
# yarn
$yarn add @antv/x6

インストールが完了したら、import または require を使用して参照します。

import { Graph } from 'antv/x6'

3 基本概念

3.1 キャンバスグラフ

x6 では、Graph はグラフのキャリアであり、グラフ上のすべての要素 (ノード、エッジなど) が含まれ、グラフの関連操作 (対話型モニタリング、要素操作など) もマウントされます。

const graph = new Graph({
  panning:true //支持平移
  selecting: {
    enabled: true, //支持选中
    multiple: true,
    movable: true, //支持拖动
  }
}
graph.zoom(0.2) //在原来缩放级别上增加0.2
graph.zoom(-0.2) //在原来缩放级别上减少0.2

3.2 基本クラスのセル

基本クラス Cell は、属性スタイル、可視性、ビジネスデータなど、ノードとエッジの共通の属性とメソッドを定義します。

セルにはいくつかの基本的なオプションがあります。

3.3 ノードノード

ノードはすべてのノードの基本クラスであり、Cell から継承し、ノードの共通のプロパティとメソッドを定義します。

size: ノードのサイズを定義します。これは、幅と高さのプロパティを含むオブジェクトです。ノードのサイズは、size() メソッドを通じて取得および設定できます。
Position: ノードの位置。x プロパティと y プロパティを含むオブジェクトです。
angle: ノードの回転角度。回転中心はノードの中心です。

3.4 エッジ

ソース: ソースオブジェクト。
ターゲット: ターゲットオブジェクト。ソースとターゲットはどちらも任意の要素にすることができますが、違いは、ソースが開始点であり、ターゲットが終了点であることです。たとえば、コネクタ内の矢印は常にソースからターゲットを指します。
コネクタ：接続線。
頂点: パスポイント。配列です。エッジは始点から始まり、ウェイポイントを順番に通過し、最終的に終点に到達します。

4 使用

4.1 ノードの作成

1. コンストラクターを使用します。X6 の Shape 名前空間には、Rect、Circle、Ellipse などのいくつかの基本的なノードが組み込まれており、これらのノードのコンストラクターを使用してノードを作成できます。

import { Shape } from '@antv/x6'

// 创建节点
const rect = new Shape.Rect({
  x: 100,
  y: 200,
  width: 80,
  height: 40,
  angle: 15,
  attrs: {
    body: {
      fill: '#2ECC71', // 背景颜色
      stroke: '#000', // 边框颜色
    },
    label: {
      text: 'coldchain', // 文本
      fill: '#333', // 文字颜色
      fontSize: 13, // 文字大小
    },
  },
})

// 添加到画布
graph.addNode(rect)

2.VUEノードを使用する

Graph.registerNode("my-count", {  //将vue组件注册到系统中
  inherit: "vue-shape",  //指定节点类型为vue-shape
  x: 200,
  y: 150,
  width: 150,
  height: 100,
  component: {
    template: `<Count />`,
    components: {
      Count,
    },
  },
});

graph.addNode({
  id: "1",
  shape: "my-count", //将节点的 shape 属性指定为注册的节点名称
  x: 400,
  y: 150,
  width: 150,
  height: 100,
  data: {
    num: 0,
  },
});

このようにしてノードをカスタマイズできるため、ノードのスケーラビリティが大幅に向上します。

4.2 ノード接続

  const rect1 = graph.addNode({
      x: 30,
      y: 30,
      width: 100,
      height: 60,
      label: 'hello',
      id:'coldChain01',
      ports: [  //设置连接桩
        { id: 'port1' }, 
        { id: 'port2' },
      ],
    })

    const rect2 = graph.addNode({
      x: 400,
      y: 240,
      width: 100,
      height: 60,
      label: 'world',
      id:'coldChain02',
      ports: [
        { id: 'port3' }, 
        { id: 'port4' },
      ],
    })

    graph.addEdge({
      source: {cell:'coldChain01',port:'port1'}, //起点id和连接桩id 
      target: {cell:'coldChain02',port:'port3'}, //终点id和连接桩id 
      vertices: [
        { x: 100, y: 200 },
        { x: 300, y: 120 },
      ],
    })
  }

4.3 イベントシステム

antv-x6 は、次のようにリッチマウスイベントをサポートします。

graph.on('cell:click', ({ e, x, y, cell, view }) => { })

イベントは、graph.on 関数を通じて監視できます。たとえば、クリック、ダブルクリック、マウスの移動、移動などのイベントがフローチャートで使用されます。さらに、antv-x6 はカスタムイベントもサポートします。

node.attr({
  // 表示一个删除按钮，点击时删除该节点
  image: {
    event: 'node:delete',
    xlinkHref: 'trash.png',
    width: 20,
    height: 20,
  },
})
graph.on('node:delete', ({ view, e }) => {
  e.stopPropagation()
  view.cell.remove()
})

5 まとめ

antv-x6 は、強力で拡張性の高い視覚化ツールで、すぐに使用できる一連の対話型ソフトウェアと使いやすいノードのカスタマイズ機能を提供し、ユーザーがフローチャート、ER 図、その他の高度に対話型のアプリケーションを簡単に作成できるようにします。この共有では x6 の基本機能を紹介しますが、さらに高度な機能が私たちの学習と探索を待っています。

著者: JD Logistics 燕志廷

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