G6

英語| 简体中文

G6：TypeScriptのグラフ視覚化フレームワーク

はじめに•例•クイックスタート•API

G6はグラフ視覚化エンジンです。図面、レイアウト、分析、インタラクション、アニメーション、テーマ、プラグインなど、グラフの視覚化と分析に基本的な機能を提供します。 G6を使用すると、ユーザーは独自のグラフの視覚化および分析アプリケーションを迅速に作成でき、リレーショナルデータをシンプルで透明性、意味のあるものにすることができます。

特徴

G6は、プロのグラフ視覚化エンジンとして、次の機能を誇っています。

• リッチな要素：広範なスタイル構成を備えたさまざまな内蔵ノード、エッジ、コンボUI要素が付属し、データコールバックをサポートし、カスタム要素を拡張するための柔軟なメカニズムがあります。
• 制御可能な相互作用：10を超える組み込みの相互作用動作が含まれ、豊富なイベントを提供し、カスタムインタラクティブな動作の拡大を促進します。
• 高性能レイアウト：エンジンは10以上の一般的なグラフレイアウトを備えており、その一部はGPUとRust Parallel Computingを活用してパフォーマンスを向上させ、カスタムレイアウト開発をサポートします。
• 便利なプラグイン：柔軟な拡張性を備えた最適化された内蔵プラグインの機能とパフォーマンスにより、カスタマイズされたビジネス機能の実装が容易になります。
• 複数のテーマとパレット：ANTVの新しい配色に基づいて、20を超える人気のあるコミュニティカラーパレットを統合する2セットの組み込みテーマを明るくて暗く提供しています。
• マルチ環境レンダリング：Gのパワーを活用すると、Canvas、SVG、およびWebGLでのレンダリング、およびnode.jsを使用したサーバー側のレンダリングをサポートします。また、WebGLに基づいた強力な3Dレンダリングと空間的相互作用を提供するプラグインパッケージも提供します。
• Reactエコシステム：React Front-Endエコシステムを利用することにより、Reactノードをサポートし、G6ノードのプレゼンテーションスタイルを大幅に濃縮します。

？はじめる

G6は通常、NPMやYARNなどのパッケージマネージャーを介してインストールされます。

$ npm install @antv/g6

Graphオブジェクトは、G6からインポートできます。

 < div id =" container " > </ div > 

 import { Graph } from '@antv/g6' ;

// Get the Data.
const data = {
  nodes : [
    /* your nodes data */
  ] ,
  edges : [
    /* your edges data */
  ] ,
} ;

// Create the Graph instance.
const graph = new Graph ( {
  container : 'container' ,
  data ,
  node : {
    palette : {
      type : 'group' ,
      field : 'cluster' ,
    } ,
  } ,
  layout : {
    type : 'force' ,
  } ,
  behaviors : [ 'drag-canvas' , 'drag-node' ] ,
} ) ;

// Render the Graph.
graph . render ( ) ;

すべてがうまくいきます、あなたは次の素敵なグラフを手に入れることができます！

？生態系

• ANTデザインチャート：G2、G6、X6、L7に基づくReactチャートライブラリ。
• Graphin ：G6に基づく単純な反応ラッパーと、グラフ視覚化アプリケーションを開発するためのSDK。

より多くのエコシステムオープンソースプロジェクトには、貢献を歓迎します。含めるためにPRをお気軽に送信してください。

？貢献

• 発行報告：使用中にG6の問題が発生した場合は、問題を再現できる最小限のサンプルコードとともに、お気軽に問題を送信してください。
• 貢献ガイド：G6への開発と貢献に関与する方法に関する情報。
• アイデアのディスカッション：GitHubのディスカッションやDingtalkグループでのアイデアについて話し合います。

？ライセンス

mit。