がリリースされました

AntV G6の毎月のリリースは予定通り来ます.今日はバージョン3.8.0をリリースしました.何が新しい?G 6インタラクティブ文書のグラフメーカーのと再生可能なTimebarは、確かに最大のハイライトです.また、最先端のフィルタのレンズの円周は、潜在的に設定可能な魚眼の突起は、より強力なJSXのルーチン定義スキームを採用、パフォーマンス性能の最適化と、完全な機能を内蔵しています.

インタラクティブ文書

ただそれを使用する方法を知りたいが、ドキュメントを読みたくないですか?非常に多くの構成項目を使用すると、いずれかを見つけることができませんか?ユーザーの痛みのポイントは、私たちの痛みのポイントであり、ユーザーのトラブルは、我々のトラブルです.今回、我々はGraphMaker(インタラクティブドキュメント)を起動しました.これはドキュメントを見ないで設定する方法を知ることができます.

If there is a slight movement, click GraphMarker to experience it.

エッジフィルタレンズ：探査をより集中させる

Please click here to experience.

グラフ内の多数のエッジが存在する場合,エッジ間の相互オクルージョンとクロスオーバは,明らかに注意エッジのいくつかを見ることは非常に困難である.この問題を解決するために、G 6はエッジフィルタレンズプラグインを提供します.エッジフィルタプラグインの使用方法は、単純にフィルタ機能を構成するか、またはフィルタを作成するときにフィルタのオプションを設定します.

const filterLens = new G6.EdgeFilterLens({
  // The way to move the lens
  trigger: 'drag',
  // Whether to show the label inside the lens
  showLabel: 'edge',
  // The filter option. 'one': only show the edges with one end node inside the lens;
  // 'both': show the edges with two end nodes inside the lens;
  // 'only-source': only show the edges with source node inside the lens;
  // 'only-target': only show the edges with target node inside the lens.
  type?: 'both';
  // Custom the filter function: e.g. only show the edges with 'size' larger than 3
  shouldShow: d => {
    if (d.size > 3) return true;
    return false;
  },
});

様々なタイムバー

Please click here to experience.

Timebarコンポーネントはプレビュー版で、構成項目とAPIは変更されるかもしれません.あなたが生産環境でそれを使用する場合は、慎重に検討してください、我々は次のバージョンで安定版を提供します.
タイムバープラグインの3つの形式を提供します.
トレンドチャート
シンプルなタイムバー
タイムバー
それらのすべての範囲をサポート/シングルタイムポイント再生、早送り、巻き戻し、速度調整と他の機能.その中で、トレンドチャートタイム軸と簡単なバージョン時間軸は、単一の時間と時間範囲の切り替えをサポートします.

トレンドチャート

需要に応えるのが難しい単一の線チャートまたは面積チャートですか?ミックスチャートを使用することができます.我々は現在、ヒストグラム、ライングラフ、およびエリアグラフをサポートしています.我々は、マルチラインチャートをサポートしていません.

シンプルなタイムバー

場合は、トレンドチャートのタイム軸はあまりにも複雑であると思う場合は、時間軸のコンポーネントの簡単なバージョンを選択することができます.

タイムバー

スケール型時間軸は離散時間データを表示するように設計されている.スケール時間軸上の各小四角形はスケール値を表す.クリックして特定のスケールを選択します時間軸をドラッグしてスケール範囲を選択します.

魚眼の設定は無料です

Please click here to experience.

G 6の最後のバージョンでは、FishEye、フォーカス+コンテキストの探査のために設計されたプラグインを起動しました.これは、関心のある領域でズームしながらコンテキストとフォーカス領域とフォーカス領域との関係が失われないことを保証することができます.
今回、我々はより良い魚眼を作った!我々はFishEyeにより多くの設定を追加しました.そして、Fisheyeを使っている間、ユーザーがダイナミックにFisheyeの報道と拡大を変えるのを許しました.ユーザーは、彼らが望むものを探索することができます.

より強力なノード定義方式

Please click here to experience, and the document is stamped here.

G 6の最後のバージョンでは、ユーザー定義のノードから始めるコストを減らすために、我々はノードを定義するためにJSXのような構文を提供しました.便宜上、多くの制限が加えられ、柔軟性が大幅に低下する.
我々はユーザーの意見を収集し、いくつかのアップグレードを行いました.起動のコストを削減しながら、それはまた、ある程度の柔軟性とスケーラビリティを維持します.さて、JSXのようなプリリリースのカスタムノードは以下の設定をサポートしています.
更新プログラムは、後の定義、setStateとその他のメソッドを定義しますnext属性はstyleに追加される.値が'inline'の場合、次の要素が自動的に前の要素の右側に配置されます.

G6.registerNode('jsx-node', {
    jsx: cfg => `<group>
        <rect style={{
      marginLeft: 10,
      marginTop: 3,
      width: ${cfg.width},
      height: ${cfg.height},
      fill: '#fff',
      stroke: '#1890ff'
    }} name="body" >
      <rect style={{
        marginLeft: 10,
        width: ${cfg.width / 100 * cfg.used},
        height: ${cfg.height},
        fill: '#1890ff',
        stroke: '#1890ff'
      }}/>
    </rect>
  </group>`,
  setState(name: string, value: string | boolean, item: Item) {},
  afterDraw(cfg: NodeConfig) {}
})

性能と機能最適化

大量のデータとの相互作用の性能問題は,常にg 6のユーザを悩ました.キャンバスのドラッグ中に非重要なグラフィックを非表示にサポートする以前のバージョンに従って、このバージョンでは、我々は自動的に非表示のグラフィックを非表示にズーム中に追加しました.この小さな最適化は大幅にキャンバスとユーザーのインタラクティブな体験をズームのパフォーマンスを向上させることができます.
また、グラフ内に多数のコンボがある場合、特定のパフォーマンス問題も発生します.今、我々はまた、コンボのパフォーマンスを最適化している.
新機能を追加し、パフォーマンスを最適化することに基づいて、既存の機能を研磨し、バグを修正することはありません.3.7.0から3.8.0まで、我々は合計20 +でユーザビリティ問題と機能的欠陥を固定して、Polylineアルゴリズムを最適化しました.詳しくはG 6 changelogを参照してください.

結論

G 6の3.8.0では、3つの側面で強化と最適化を行いました:使いやすさ、分析能力、およびパフォーマンス.
ユーザーが学ぶことを許可するために、より速く、より良い開始を取得するには、G 6インタラクティブドキュメントのグラフメーカーをリリースしました複雑な関係データを探索することをより簡単にするために、我々はサイドフィルタプラグインを加えました、そして、我々は既存のフィッシュアイプラグインを強化しました;時系列データの礎石を探索するには、3つの異なるタイプのタイムラインを提供します柔軟性とスケーラビリティを維持しながら低コストでノードを定義するために、我々はノードを定義するためにJSXを使用する解を最適化しました.
G 6はグラフの可視化とグラフ解析の分野で動き続けます.私たちはあなたのサポートとフィードバックを非常に必要とし、あなたの注意をいただきありがとうございます.

AntV G6 is an open source graph visualization engine, focusing on graph visualization and graph analysis.
Welcome to follow and star our GitHub: https://github.com/antvis/G6
Official website: https://g6.antv.vision/en/