本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 知識圖表場景整合
<a name="tm-knowledge-graph-scene"></a>

您可以使用 AWS IoT 應用程式套件元件來建置 Web 應用程式，將知識圖表整合到您的 AWS IoT TwinMaker 場景中。這可讓您根據場景中存在的 3D 節點 （代表設備或系統的 3D 模型） 產生圖形。若要建立從場景繪製 3D 節點圖形的應用程式，請先將 3D 節點繫結至工作區中的實體。透過此映射， 可 AWS IoT TwinMaker 繪製場景中 3D 模型與工作區中實體之間的關係。然後，您可以建立 Web 應用程式、使用場景選取 3D 模型，並以圖形格式探索它們與其他實體的關係。

![\[TwinMaker 場景具有知識圖表，顯示 3D 模型之間的關係。\]](http://docs.aws.amazon.com/zh_tw/iot-twinmaker/latest/guide/images/intro_kg_scene.png)


如需使用 AWS IoT 應用程式套件元件在 AWS IoT TwinMaker 場景中產生圖形的工作 Web 應用程式範例，請參閱 github 上的[AWS IoT TwinMaker 範例反應應用程式](https://github.com/awslabs/iot-app-kit/blob/3DKG_Demo/examples/react-app/src/components/index.tsx)。

## AWS IoT TwinMaker 場景圖表先決條件
<a name="tm-knowledge-graph-prereqs"></a>

建立在場景中使用 AWS IoT TwinMaker 知識圖表的 Web 應用程式之前，請先完成下列先決條件：
+ 建立 AWS IoT TwinMaker 工作區。您可以在 [AWS IoT TwinMaker 主控台](https://console.aws.amazon.com/iottwinmaker/)中建立工作區。
+ 熟悉 AWS IoT TwinMaker實體元件系統，以及如何建立實體。如需詳細資訊，請參閱[建立您的第一個實體](twinmaker-gs-entity.md)。
+ 建立填入 3D 模型的 AWS IoT TwinMaker 場景。
+ 熟悉 AWS IoT TwinMaker AWS IoT 的應用程式套件元件。如需 AWS IoT TwinMaker 元件的詳細資訊，請參閱 [使用 AWS IoT TwinMaker UI 組件創建自定義 Web 應用程序](tm-app-kit.md)。
+ 熟悉知識圖表概念和關鍵術語。請參閱 [AWS IoT TwinMaker 知識圖表核心概念](tm-knowledge-graph.md#tm-knowledge-graph-concepts)。

**注意**  
若要使用 AWS IoT TwinMaker 知識圖表和任何相關功能，您需要處於**標準**或**分層套件**定價模式。如需 AWS IoT TwinMaker 定價的詳細資訊，請參閱 [切換 AWS IoT TwinMaker 定價模式](tm-pricing-mode.md)。

## 在場景中繫結 3D 節點
<a name="tm-knowledge-graph-scene-data-binidng"></a>

在您建立整合知識圖表與場景的 Web 應用程式之前，請將場景中出現的 3D 模型繫結至相關聯的工作區實體，稱為 3D 節點。例如，如果您在場景中有混合器設備的模型，以及稱為 的對應實體`mixer_0`，請在混合器的模型與代表混合器的實體之間建立**資料繫結**，以便模型和實體可以繪製圖形。

**執行資料繫結動作**

1. 登入 [AWS IoT TwinMaker 主控台](https://console.aws.amazon.com/iottwinmaker/)。

1. 開啟您的工作區，並選取具有您要繫結之 3D 節點的場景。

1. 在場景編寫器中選取節點 (3D 模型）。當您選取節點時，它會在畫面右側開啟檢測器面板。

1. 在檢測器面板中，導覽至面板頂端，然後選取 **\$1** 按鈕。然後選擇**新增實體繫結**選項。這會開啟下拉式清單，您可以在其中選取要繫結至目前所選節點的實體。  
![\[在檢查器面板中選取加號，並反白新增實體繫結的場景。\]](http://docs.aws.amazon.com/zh_tw/iot-twinmaker/latest/guide/images/binding-step-4.png)

1. 從資料繫結下拉式功能表中，選取要映射至 3D 模型的實體 ID。針對**元件名稱**和**屬性名稱**欄位，選取您要繫結的元件和屬性。  
![\[在檢查器面板中選取元件和屬性名稱的場景。\]](http://docs.aws.amazon.com/zh_tw/iot-twinmaker/latest/guide/images/binding-step-6.png)

   一旦您選取**實體 ID**、**元件名稱**和**屬性名稱**欄位，繫結即完成。

1. 針對您要繪製圖形的所有模型和實體重複此程序。
**注意**  
您可以在場景標籤上執行相同的資料繫結操作，只要選取標籤而非實體，然後依照相同的程序將標籤繫結至節點即可。

## 建立 Web 應用程式
<a name="tm-knowledge-graph-scene-application"></a>

繫結實體之後，請使用 AWS IoT 應用程式套件程式庫建置具有知識圖表小工具的 Web 應用程式，讓您檢視場景並探索場景節點和實體之間的關係。

使用下列資源建立您自己的應用程式：
+  AWS IoT TwinMaker 範例反應應用程式 github [ Readme](https://github.com/awslabs/iot-app-kit/blob/3DKG_Demo/examples/react-app/README.md) 文件。
+ github 上的 AWS IoT TwinMaker 範例反應應用程式[來源](https://github.com/awslabs/iot-app-kit/blob/3DKG_Demo/examples/react-app/src/components/index.tsx)。
+  AWS IoT 應用程式套件[入門](https://awslabs.github.io/iot-app-kit/?path=/docs/overview-getting-started--docs)文件。
+  AWS IoT 應用程式套件[影片播放器元件](https://awslabs.github.io/iot-app-kit/?path=/docs/components-videoplayer--docs)文件。
+  AWS IoT 應用程式套件[場景檢視器元件](https://awslabs.github.io/iot-app-kit/?path=/docs/components-sceneviewer--docs)文件。

下列程序示範 Web 應用程式中場景檢視器元件的功能。

**注意**  
此程序是以 AWS IoT TwinMaker 範例反應應用程式中 AWS IoT 應用程式套件場景檢視器元件的實作為基礎。

1. 開啟 AWS IoT TwinMaker 範例反應應用程式的場景檢視器元件。在搜尋欄位中輸入實體名稱或部分實體名稱 （區分大小寫搜尋），然後選取**搜尋**按鈕。如果模型繫結至實體 ID，則會反白顯示場景中的模型，並在場景檢視器面板中顯示實體的節點。  
![\[顯示知識圖表場景檢視器面板的場景。\]](http://docs.aws.amazon.com/zh_tw/iot-twinmaker/latest/guide/images/search_select_kg_event.png)

1. 若要產生所有關係的圖形，請在場景檢視器小工具中選取節點，然後選取**探索**按鈕。  
![\[知識圖表場景檢視器面板的場景會顯示關係圖表。\]](http://docs.aws.amazon.com/zh_tw/iot-twinmaker/latest/guide/images/explore_select_kg.png)

1. 按下**清除**按鈕以清除您目前的圖形選擇並重新開始。