美団におけるナレッジグラフ可視化技術の実践と探究

著者 | 魏耀成魏

ナレッジ グラフの視覚化により、ナレッジ グラフ データをより直感的に表示および分析できます。この記事では、主にレイアウト戦略、視覚ノイズ低減、インタラクティブ機能、ビジュアルナラティブ、3Dグラフ可視化などにおけるMeituanプラットフォームの実践と探求を紹介します。同時に、ユニグラフグラフ可視化ソリューションを促進し、Meituan Brain、グラフデータベース、インテリジェントIT運用と保守、コンポーネント依存関係分析、業界フィールドグラフなど、Meituanの多くのビジネスシナリオをサポートしました。ナレッジグラフの視覚化に取り組んでいる学生にとって、これが役立ち、刺激になることを願っています。

1 ナレッジグラフ可視化の基本概念

1.1 ナレッジグラフ技術の紹介

ナレッジ グラフは、人工知能の重要な分野です。これは、エンティティ間の関係性を明らかにし、現実世界の物事とその関係性を正式に記述できるセマンティック ネットワークです。たとえば、「孫悟空の師匠は唐僧である」というのは知識です。この知識には、「孫悟空」と「唐僧」という 2 つのエンティティがあり、「マスター」はこれら 2 つのエンティティの関係を説明しています。上記の内容は、ナレッジ グラフ内で SPO トリプル (主語 - 述語 - 目的語) を形成します。したがって、現実世界のエンティティ間の関係を記述するには、ナレッジ グラフを使用することが非常に適しています。ナレッジグラフのこのような利点から、この技術は急速に普及し、現在では検索、推奨、広告、質疑応答など多くの分野で対応するソリューションが存在します。

1.2 ナレッジグラフ可視化の概要

視覚化とは、簡単に言えば、データをより直感的な形式で提示することです。実は、現在よく使われている折れ線グラフ、棒グラフ、円グラフ（以下、棒グラフ、円グラフと呼びます）、さらには Excel の表もすべてデータ視覚化の一種です。従来、データは主にデータテーブルの形式で保存されていましたが、この方法では知識型のデータを構造化して保存することが困難でした。リレーショナル データの場合、前の例をベースとして使用し、いくつかの関連情報を追加すると、次のように視覚化できます。

西遊記における人と物の関係

この種の情報は、「折り畳み円グラフ」や表を使用して提示することは困難ですが、ナレッジ グラフの視覚化の方法で提示すると非常に明確になります。

2 シナリオ分析とアーキテクチャ設計

2.1 シナリオ要件分析

整理した結果、Meituan のさまざまなビジネス シナリオにおけるナレッジ グラフの視覚化のニーズには、主に次のカテゴリが含まれることがわかりました。

• グラフ クエリ アプリケーション: グラフ データの編集、サブグラフの探索、頂点/エッジ情報のクエリなどのインタラクティブな操作を提供する、グラフ データベースに基づくグラフ視覚化ツールです。
• グラフ分析アプリケーション: ビジネス シナリオ内のリレーショナル データを視覚化して、ビジネス パートナーがリンク障害やコンポーネントの依存関係などの問題を迅速に理解できるようにします。
• テクノロジーブランドの構築: ナレッジグラフを通じて、人工知能テクノロジーとは何か、何ができるのかを普及させ、AI を説明可能にすることができます。

2.2 技術の選択とアーキテクチャ設計

グラフ関係の可視化には国内外に多くのグラフ可視化フレームワークがありますが、Meituan のビジネス シナリオには多くのパーソナライズされたニーズとインタラクション方法があるため、D3.js を基本フレームワークとして選択しました。初期コストは高くなりますが、柔軟性が高く、機能拡張が非常に便利です。 D3.js は、力指向グラフの位置計算のための基本的なアルゴリズムを提供し、非常に便利なレイアウト介入メソッドも備えています。そのため、私たちは独自のナレッジ グラフ視覚化ソリューションである uni-graph を D3.js に基づいてカプセル化しました。全体的な機能およびアーキテクチャ設計を下図に示します。以下では、ユニグラフの機能詳細と視覚化のための一般的な技術戦略を紹介します。

アーキテクチャ図

3 技術的課題とソリューション設計

3.1 レイアウト戦略

異なるタイプのナレッジグラフでは、データに大きな違いがあるため、レイアウト効果に対する要件も異なります。ビジネスデータを適切にレイアウトして視覚化することは、大きな技術的課題です。以下の基本レイアウトに加えて、特定のシナリオ向けのレイアウト ソリューションもいくつか検討しました。

レイアウト戦略 - 基本レイアウト

データの特徴を抽出してレイアウトを最適化する

D3.js によって提供される力指向グラフ モジュール (d3-force) は、粒子の物理的な動きをシミュレートするための速度 Verlet 数値​​積分器を実装します。あまり介入することなく、ノードとエッジの関係に従って物理粒子のランダムな動きがシミュレートされます。 D3.js の力指向グラフによって提供される機械的パラメータには、主に Centering (求心力)、Collision (衝突検出)、Links (バネ力)、Many-Body (電荷力)、Positioning (位置決め力) が含まれます。さまざまなノードに対して適切な機械的介入を実行する方法が、レイアウトをより期待どおりにするための鍵となります。一般的に、同じビジネス シナリオのグラフ構造には一定の類似点があります。ビジネス固有のデータ構造特性に基づいてカスタマイズされた機械的なチューニングを検討します。ここで、説明のための簡単なシナリオを示します。ツリーにのみ存在する階層とリーフ ノードの概念を抽象化しました。一部のノードは互いにループを形成し、ツリーの定義を満たしませんが、ほとんどのデータはツリーのような構造になっています。デバッグ後、表示される関連付けはランダムなレイアウトよりも明確になり、ユーザーは必要なデータをより速く見つけることができます。

レイアウト戦略 - データ機能に基づく最適化 実際、Meituan の各ビジネス シナリオでは、パーソナライズされたレイアウトのカスタマイズが必要です。 ここでは、最も単純なシナリオの 1 つだけを取り上げます。 Uni-graph は、機械パラメータ調整用のモジュールを分離し、よく使用されるいくつかのパラメータ プリセットを整理して、多くのシナリオでレイアウトの最適化をサポートします。

階層型データレイアウトスキーム

多くのビジネス シナリオでは、ユーザーはグラフ データを階層形式で表示することを好みます。これは、ユーザーの探索パス、エッジ関係の集約、ビジネス属性の分類、指定された中心点のパスなどに基づく階層化によって、グラフ データの理解と分析が容易になるためです。これらの要件により、グラフのスタイルとレイアウトに対する要求が高くなります。 D3.js の機械的なレイアウトの柔軟性と拡張性のおかげで、ビジネスの現場でよく使用されるレイアウト ソリューションをいくつか実装できました。

レイアウト戦略 - 階層レイアウト - 1

レイアウト戦略 - 階層レイアウト - 2

クラスタリング層のレイアウトを例に、実装プロセスを簡単に紹介します。

まず、グラフデータを処理し、中心ノードに関連付けられたサブノードを関連関係に従って分類し、クラスターエッジとクラスターエッジノードを生成し、サブノードを階層化します。また、クラスタリング フォースをカスタマイズする必要があります。これには、クラスターの中心、フォースの強度、クラスターの半径に対応する、ClusterCenter、Strength、Radius の 3 つのパラメーターが含まれます。メカニクスの初期化中に、各子ノードのクラスター中心ノードとクラスター半径を定義します。最後に、機械レイアウトのティックプロセスでは、まず子ノードとそのクラスター中心ノード間の座標オフセットを計算し、次にオフセットとクラスター半径の差に基づいてノードの力の方向と大きさを決定します。最後に、ベクトル計算によってノードの座標が取得されます。

レイアウトパラメータの設定

特定の分野でのグラフの視覚化では、これらのシナリオにおけるグラフの関係構造が比較的固定されているため、通常、1 つまたは 2 つのレイアウトでユーザーの表示ニーズを満たすのに十分です。しかし、プラットフォームベースのツールであるため、複数のフィールドでマップを表示する必要があります。各分野の地図の特徴をより明確に示すためには、地図に合わせてレイアウト形式も変更する必要があります。このシナリオでは、複数のレイアウト パラメータの構成を実装しました。ユーザーは、ドメイン グラフの特性に応じてレイアウト パラメータを最適化し、構成として保存できます。ドメイングラフの可視化 - グリッドレイアウトパラメータの調整

レイアウト戦略パラメータ設定

グラフデータベース可視化 - レイアウトスタイルパラメータ調整

レイアウト戦略 - グラフデータベースサービスリンク可視化 - タイルレイヤーレイアウトパラメータ調整レイアウト戦略 - サービスリンク

3.2 視覚ノイズ低減

ユーザーが視覚化アプリケーションを使用するとき、テキスト/ノード/エッジなどの要素が混在します。情報が適切に表現および提示されない場合、ユーザーエクスペリエンスと効率に直接影響します。分析の結果、これは視覚化のプロセス中に生成される視覚ノイズが多すぎることと、視覚化によってもたらされる有効な情報が少なすぎることが原因であることがわかりました。次の例は、視覚ノイズがどのようなものかを示しています。

視覚ノイズの低減 - 視覚ノイズ

上の写真では、ナレッジグラフのデータが提示されていますが、要素数が非常に多く、情報が乱雑なため、ユーザーに「目がくらむ」ような印象を与えています。以下ではこれらの問題に対する解決策を紹介します。

ワードプロセッシング

テキストは主にノードとエッジを説明するために使用されます。テキストは非常に重要な情報を提供できますが、ノードの数が増えると、テキストが重なり合うことが避けられません。重なり合ったテキストはすぐに識別するのが難しく、情報を伝達できないだけでなく、視覚的な体験も悪くなります。そのためには、テキストのオクルージョン検出を行う必要があります。テキストの重なり関係に応じて、下部のテキストの透明度を下げる必要があります。こうすることで、複数のレイヤーのテキストが重なっていても、最上位のレイヤーのテキストをすばやく認識できます。

視覚ノイズ低減 - テキストコントラスト

ただし、ノード数が増加するにつれて、このソリューションの時間計算量は徐々に制御不能になります。ノードが 100 個ある場合、計算を完了するには最大で O(n!) の時間計算量がかかります。ここでは、最適化のためにグリッド分割法を使用します。まず、キャンバスをグリッドに分割し、次にノードが配置されているグリッドを決定します。衝突検出を実行するときは、異なるグリッドのノードは確実に衝突しないため、同じグリッドのノードと比較するだけで済みます。

視覚ノイズ低減 - テキスト - グリッド分割

このグリッド分割の理論的根拠は四分木衝突検出であり、これに基づいてさらなる最適化を行いました。隠蔽する必要がある要素はテキスト タイプのノードであるため、このタイプのノードの特徴は、長さが幅よりもはるかに大きいことです。従来の四分木セグメンテーション アルゴリズムを使用すると、多くのテキスト ノードが複数のグリッドにまたがるため、比較の数が多くなります。検出の前に、まずすべてのテキスト ノードの平均アスペクト比を計算します。各グリッド分割は、グリッド アスペクト比がテキストの平均アスペクト比に近い方向に応じて、水平または垂直になります。これにより、テキスト ノードが複数のグリッドにまたがる状況が軽減され、衝突を検出する必要があるノードの数が減ります。

視覚ノイズ低減 - テキスト - Quadtree

エッジ処理

多面ハッシュ

ナレッジ グラフには、多数のインバウンド エッジとアウトバウンド エッジを含む中央ノードがあります。これらの中央ノードのエッジを視覚化すると、エッジが中央ノードの接続 (Nexus) と重なり合って交差することが多く、視覚的なエクスペリエンスに影響を及ぼします。この特別なシナリオのために、マルチエッジ ハッシュ アルゴリズムを設計しました。エッジ角度オフセットを計算し、ノード半径をカットすることで、Nexus がノードの周囲に分散され、エッジの重なりが減り、より明確な視覚効果が得られます。

エッジ処理 - ハッシュ配置

複数のタイプの調整可能なエッジ

また、複数の種類のエッジを実装し、ベジェ曲線の制御点、ラジアン、スピン角度などのパラメータ設定を通じてエッジ スタイルを調整できるようにして、さまざまな複雑なグラフの視覚化シナリオに対応します。

エッジ処理 - 複数のエッジタイプ

エッジを複数のハッシュに配置し、エッジ タイプを変更し、スタイル パラメータを調整することで、グラフ内の乱雑で無秩序なエッジを最適化する効果は次のとおりです。

エッジ処理 - 最終比較

3.3 インタラクティブ機能

適切なグラフレイアウトによりデータの意味をより適切に表現でき、視覚的なノイズを低減することでグラフでより効果的な情報を伝達できるようになります。しかし、ユーザーは依然としてインタラクションを通じて関心のある情報を見つける必要があります。グラフ可視化ツールが使いやすいかどうかは、インタラクティブ機能によって大きく左右されます。現在、以下の基本的なインタラクティブ機能を実装しています。

• キャンバス操作: ドラッグ、ズーム、動的拡張、レイアウト変換、複数ノードの選択。
• 要素（ノードとエッジ）の操作：スタイル設定、サスペンションハイライト、要素ロック、シングルクリック、ダブルクリック、右クリックメニュー、折りたたみ/展開、ノードドラッグ、エッジタイプの変更。
• データ操作: ノードの追加、削除、変更、チェック、エッジの追加、削除、変更、チェック、サブグラフの探索、データのマージ、更新、再読み込み。

上記の基本的なインタラクション機能に加えて、いくつかの特殊なシナリオでのインタラクションについても調査しました。グラフ視覚化におけるインタラクションの目的は、巨大なナレッジ グラフから興味のあるデータの関連性を見つけ、グローバル キャンバス内でのこれらの関連性の位置を観察することです。

パスロック

異なるノードを選択すると、ノード間の適切なパスが自動的に計算され、表示用にロックされるため、2 つ以上のノードの関係を簡単に確認できます。

インタラクティブ機能 - パスロック

ディスプレイに焦点を当てる

現在注目されていないマップ領域については、デフォルトのレイアウトを密にしてキャンバスのスペースを節約できます。特定の領域に注目した後、現在注目されている小さな領域が再配置され、ノードの配置がより分散され、テキストコンテンツが見やすくなります。

インタラクティブ機能 - ディスプレイにフォーカス

実は、可視化されたノードやエッジの数がどれだけ多くても、業務の詳細を深く掘り下げていくと、ユーザーが注目するノードの数は実はそれほど多くありません。重要なのは、大量のデータからユーザーが気にするデータをフィルタリングし、わかりやすく提示することです。

3.4 Meituan Brainの可視化

美団ブレインメインインターフェース

Meituan Brainは、食べる、飲む、楽しむなどのさまざまなシーンを中心に構築された、生活とエンターテインメントの分野における超大規模ナレッジグラフであり、ユーザーと商人の間に全次元的なリンクを確立します。 Meituan Brain の機能をより理解しやすく使いやすくするために、ナレッジ グラフの視覚化を通じて Meituan Brain をより具体的にし、便利なナレッジ グラフ クエリ アプリケーションを開発する必要があります。ナレッジ グラフの視覚化機能を開発する前に、いくつかの一般的な視覚化機能も必要です。以下では、主にマルチスクリーン対応やアニメーションに関する技術的機能について紹介します。

マルチスクリーン適応ソリューション

Meituan Brain が提供する端末シーンは、PC/Mac 画面、大画面テレビ、巨大ワイドスクリーンなど、非常に複雑です。各画面のサイズ比率は異なります。統一された外観と操作感を維持するために、スクロールバーや端の空白、圧縮や変形は避けてください。同時に、いくつかの重要な場面では、巨大なワイドスクリーン上で細部を特別に調整する必要があります。非比例スケーリングとパーソナライズされた適応のニーズは、Sass の関数とミックスインを通じてより適切に満たすことができます。

コードサス

• 非比例スケーリング：長さと幅の両方を考慮する必要があるスケーリングシナリオでは、ビューポートのパーセンテージに基づいて単位vhとvwを使用するのが適切です。デザインドラフトサイズは1920 * 1080で、対応するvhとvwの値は変換機能によって自動的に計算されます。さまざまなサイズの画面でフォント サイズが期待どおりになるように、設計案の高さが rem のガイド パラメーターの基本単位として使用されます。
• パーソナライズされた適応: 超ワイドな大画面サイズでは、比率に応じて自動的にスケーリングされるため、一部の要素の視覚効果が特に完璧ではありません。上記のミックスインを使用すると、CSS で特定のサイズの画面にパーソナライズされた適応を簡単に行うことができます。
• ピクセルレベルの復元: 異なるサイズのデザインを調整すると、一部の要素に影の効果や不規則な形状が現れますが、デザイナーは長方形に従って画像を切り取ることしかできないため、Sketch によって自動的にマークされた不正確なデータが生成されます。このとき、ブラウザのサイズをデザイン案と一致するように設定し、その上に半透明のデザイン案画像を重ね、各要素を一つずつ揃えていくと、ピクセルレベルで異なるサイズの画面に素早くデザイン案を復元することができます。

この大画面適応技術ソリューションは、Meituan Brain のこれまでのすべてのバージョンの反復をサポートしています。以前、アジアンフードフェスティバルに参加した際、会場の建設が複雑だったため、画面解像度が何度も変更されました。さまざまな解像度のカスタマイズ、開発、適応を完了するのに、わずか0.5人日しかかかりませんでした。

Meituan Brain-マルチスクリーン適応現場効果

Meituan Brain-マルチスクリーン適応-現場

アニメーションスクリプトの自動化

静的な視覚化インターフェースと比較して、動的な視覚化またはインタラクティブな視覚化は視覚効果が優れており、視聴者により多くの情報を伝えることができます。

静的効果と動的効果

さらに、Meituan Brain は展示プロセスの一部で無人でした。動的な視覚化では、ループアニメーションを自動的に再生する必要もあったため、アニメーション スクリプトの自動化が必要でした。

• 操作者がいない場合、設定されたアニメーション スクリプトがループで実行されます。
• ユーザーがアプリを操作すると、アニメーションは自動的に停止されます。
• アニメーションを再実行したり、任意のシーンにジャンプしたりする便利な方法があります。

Meituan Brain のアニメーション効果には、次の特徴があります。

• アニメーションの種類には、3D タイプ、DOM アニメーション、SVG アニメーション、サードパーティの Canvas コンポーネント、Vue コンポーネントの切り替えなど、さまざまな種類があります。
• 複数のアニメーション モジュール間には接続依存関係があり、アニメーションの実行を一時停止したり開始したりできます。
• 異なるモジュール内のアニメーションは相互に通信する必要があります。

各アニメーションを関数にカプセル化し、最初に setTimeout と async 関数のソリューションを使用しました。setTimeout: は単純なアニメーションの実行を管理できますが、前のアニメーションに時間変更がある限り、後続のすべてのアニメーション setTimeout の遅延パラメータを変更する必要があり、非常に面倒です。非同期関数: アニメーションを Promise を返す関数にカプセル化することで、複数のアニメーション モジュールの依存関係の問題を解決できます。このソリューションにより、さまざまなアニメーション モジュールの開発者のコ​​ラボレーション効率が大幅に向上しますが、アニメーションを一時停止またはキャンセルすることはできません。

code-js の非同期 async 関数ソリューションはすでにかなり便利ですが、主な問題は、一度実行すると一時停止またはキャンセルできないことです。そのため、ジェネレーター関数に基づいてクラス async 関数にカプセル化し、いつでも一時停止またはキャンセルできるようにします。以下は、カプセル化された非同期アニメーション スケジューラとさまざまなツール ヘルパーを使用して記述されたアニメーション モジュールのビジネス コードです。

Code-Vue の実践

全体的なソリューションには主に次の機能があります。

• $ae は、ジェネレータ関数のカプセル化に基づく非同期ツール ライブラリ async-eraser です。CancelToken は、ジェネレータの実行を停止するキャンセル トークンです。
• 非同期イベントをサポートするカスタム EventEmitter が開発されました。emit 関数は Promise を返します。これが解決されると、発行されたアニメーションが実行されたことがわかり、Vue コンポーネント間でのアニメーションのスケジュール設定が容易になります。
• Vue コンポーネントがアンインストールされると、監視対象のイベントが自動的にオフになり、現在のコンポーネントのアニメーション スケジューラも自動的に停止します。
• DOM の transitionend イベントと animationend イベントをリッスンして、CSS アニメーションの実行が終了するタイミングを自動的に取得します。

上記のソリューションにより、アニメーションモジュールを開発する学生が非同期関数の記述のようにアニメーションモジュールを記述できるようになり、アニメーションモジュールの開発効率が大幅に向上し、全員がアニメーションの詳細のデバッグに集中できるようになりました。最終的な実装効果は次のとおりです。

美団脳全体効果

美団脳機能相互作用

美団脳機能相互作用

Meituan Brain は、さまざまなイベントや展示会に参加するだけでなく、日常業務で同僚にサービスを提供して、誰もが簡単に POI ナレッジ グラフ データを検索できるようにする必要があります。最終的な効果は、上の図に示されています。主に以下の機能と相互作用があります。

• POI 情報クエリ: 星評価、レビュー数、平均価格、住所、サブアイテム評価、推奨理由。
• ナレッジ グラフの視覚化: クラスター レイアウト、ループ レイアウト、ノード パスファインディング アルゴリズム、キャンバスのスケーリングとドラッグ、ノードのロック操作、フォーカスされたプレゼンテーション。
• 補助情報: おすすめの料理、料理ラベル、店舗ラベルのワードクラウド、感情曲線、きめ細かい感情分析、類似のレストラン。

3.5 視覚的物語の探求

Meituan Brainは、私たちのチームの最初のナレッジグラフ可視化プロジェクトです。このプロジェクトの実践を通じて、ナレッジグラフ可視化の基本的な可視化機能と最適化戦略を蓄積し、開発効率を大幅に向上させました。同時に、チームはインタラクションと表現のさらなる飛躍を検討し始めました。また、フィードバックも収集したところ、ナレッジ グラフ テクノロジーとは何か、何ができるのかを多くの人がまだ明確に理解していないことがわかりました。チームでブレインストーミングを行った結果、根本的な理由は AI テクノロジーが非常に複雑で視覚化が難しく、現実のシナリオを復元する必要があることだと考えました。ナレッジグラフは他のテクノロジーよりも解釈しやすいため、視覚的なナラティブを開発することにしました。ビジュアル データ ストーリーテリングとは、データを比喩的に視覚化し、視覚化をデータの背後にあるストーリーを視聴者に伝える手段として使うことです。純粋なテキストと視覚的な物語の違いを比較する例を次に示します。

ビジュアルナラティブからわかるように、ビジュアルナラティブはテキストよりも直感的で、視聴者がデータの背後にあるストーリーをより明確に理解するのに役立ちます。また、モーションエフェクトを通じて重要な情報を提示し、ユーザーがストーリーの内容を順番に理解できるように導くこともできます。以下では、ビジュアルストーリーテリングにおけるモーションエフェクトを開発するためのいくつかのアイデアを紹介します。

スイープライト効果

スイープライト効果は、視覚認識を向上させ、視覚的な焦点を強調するのに非常に効果的です。スイープライト効果のアウトライン要素を作成する場合、デザイナーは 2 つのファイルを提供する必要があります。1 つはアウトラインの背景画像で、もう 1 つはアウトライン パスを含む svg です。技術的な調査の結果、これは SVG グラデーションまたはマスクを通じて実現できることがわかりました。

SVG グラデーション

スイープライト - グラデーション SVG マスク

スイープ ライト マスク グラデーション ソリューションは、曲率角が小さい輪郭要素やパターンのエッジに問題なく使用できます。ただし、グラデーションは片側から反対側に直線的にしか適用できません。曲率角が大きいエッジに適用すると、グラデーション効果が不連続になります。

スイープライト - グラデーション - 欠点。 2 つのソリューションを総合的に分析した結果、マスク ソリューションの方が柔軟性が高く、グラデーション パフォーマンスが優れていることがわかりました。私たちのシーンでは大きな円弧のあるエッジを回避できるため、パフォーマンスの優れたグラデーション ソリューションを選択しました。

アニメーションリズムのデバッグ

アニメーションにリズムがあるかどうかは視聴者の体験に大きな影響を与えますが、リズム感を習得するのは非常に難しいことです。ここでは、animejs とベジェ調整という 2 つの補助ツールをお勧めします。これら 2 つのツールは、誰にでも多くのインスピレーションをもたらします。同時に、デザイナーはこれらのツールを使用してデバッグしたり、必要なアニメーション効果を自分で見つけたりできるため、アニメーション開発の共同作業コストが削減されます。以下は、ベッセル関数を使用して実装されたアニメーション効果です。

私たちは、ナレッジグラフのビジュアルナラティブの典型的なシナリオをいくつか設計し、日常生活における店舗の検索や業務分析のニーズを再現し、ナレッジグラフが実際のシナリオのニーズにどのように役立つかを直感的に示しました。ビジュアルナラティブの効果は次のとおりです。

視覚的な物語全体の効果

3.6 3D視覚化シーンの探索

上記の紹介は、2D シーンでのナレッジ グラフの視覚化の開発経験に関するものです。より優れた視覚効果を実現するために、3D シーン向けの技術的ソリューションも検討しました。私たちが Vasturiano の 3d-force-graph を選んだ理由は、次のとおりです。

• ナレッジ グラフ レイアウト ライブラリは d3-force をベースに開発された d3-force-3d です。これは、D3.js の方向でチームがこれまで蓄積してきた成果を引き継いでおり、より使いやすくなっています。
• three.js に基づいて 3D オブジェクトをレンダリングし、レンダリング レイヤーの多くの詳細をシールドし、three.js の元のオブジェクトを公開することで、3D シーンの二次開発を容易にします。

製品とデザインのレベルでは、私たちのチームは 3D ビジュアライゼーションの経験が比較的少ないため、多くの優れた作品を研究し、主に Earth 2050 プロジェクトからインスピレーションを得ました。二次開発プロセスにおける主な最適化ポイントを紹介します。

ノードスタイルの最適化

3d-force-graph のデフォルト ノードは、一般的な外観を持つ基本的な SphereGeometry 3D オブジェクトです。より洗練されたノードが必要な場合は、次のソリューションを使用して実現できます。

• シェーダを使用して透明な発光マスク マテリアルを実装します。
• ゴルフボールのようなテクスチャを使用して、ノードにさらにテクスチャ感を与えます。

操作は比較的簡単ですが、キーノードを「点灯」すると、全体的な視覚的エクスペリエンスが大幅に向上します。

3Dノードテクスチャ

3Dアニメーション

3D シーンでより良い効果を実現するには、いくつかの動的効果を追加する必要があります。カメラの動きについては、内蔵カメラを使用してクォータニオン回転を計算しました。

3Dカメラウォーク

粒子散乱

散乱時には、ランダムに目に見えないパーティクルを作成し、ゆっくりと出現するパーティクルの数を制御し、requestAnimationFrame を使用してそれぞれの方向に散乱させます。

3D粒子散乱

CES会場での製品効果とシナリオ思考の最終的な効果は次のとおりです。

3D-CESでは、主に技術プロモーションに使われる3Dナレッジグラフ可視化を開発した後、ツールアプリケーションへの移行も検討しました。しかし、ツールアプリケーションは現時点では2D表示とインタラクションに適していることがわかりました。3Dは空間利用率が高いものの、ユーザーインタラクションの方法も複雑です。将来、より効率的なインタラクション方法を思いついたら、3D ナレッジ グラフの視覚化を使用して、ツール アプリケーションの製品エクスペリエンスを強化することを再度試みます。

4つの実装シナリオ

現在、ナレッジグラフ可視化技術ソリューションは、Meituan Brain、グラフデータベース、インテリジェントIT運用・保守、コンポーネント依存性分析、製品ラベル管理、業界分野マップなど、Meituanの複数のビジネスシナリオに適用されています。今後は、さらに多くの応用シナリオを検討していきます。

着陸シーン-1着陸シーン-2着陸シーン-3

5 今後の展望

最後に、ナレッジグラフ可視化技術の今後の方向性について、インタラクションシナリオ、効果の表現、ツールの機能という3つの側面から解説します。

交流シーン

3D シーンでのインタラクション: 3D シーンでナレッジ グラフを視覚化すると、視覚的に魅力的になりますが、現段階ではまだ十分に実用的ではなく、インタラクションの効率は 2D シーンほど良くありません。効率的な 3D インタラクション方法をさらに検討する必要があります。仮想現実: メタバースの概念は、VR などの仮想現実技術の発展を急速に推進しており、技術が成熟すると、より優れた視覚化体験をもたらす可能性があります。

効果のプレゼンテーション

大規模なナレッジグラフの可視化：多数のノードを持つナレッジグラフの可視化では、WebGLやWebGPUなどの技術的ソリューションによってパフォーマンスの問題を解決できますが、可視化に限定されるため、ユーザーが必要な情報を見つけるのは困難です。数千のノードを提示しながら、ユーザーが必要な関係データ情報を簡単に見つけられるようにすることが重要です。インテリジェント レイアウト: 現在、ナレッジ グラフ レイアウトの合理性は、主に半手動介入によって保証されています。将来的には、さまざまなデータ特性に応じて適切な機械レイアウト戦略を自動的にマッチングすることを検討し、アルゴリズムを使用して最も合理的なレイアウト方法をインテリジェントに予測し、開発者やユーザーの介入コストを削減することができます。

ツールの機能

汎用クエリツール: 現在、すべての主要なナレッジグラフデータストレージエンジンには独自のビジュアルクエリツールがありますが、これらは汎用的ではなく、それぞれ長所と短所があります。統一されたビジュアルクエリ言語があれば、1つの視覚化ツールを複数のストレージエンジンとアプリケーションに適応させることができ、ツールの適用効率が向上します。