本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 节点图面板
<a name="v9-panels-node-graph"></a>

****  
本文档主题专为支持 **Grafana 9.x 版本**的 Grafana 工作区而设计。  
对于支持 Grafana 10.x 版本的 Grafana 工作区，请参阅[使用 Grafana 版本 10](using-grafana-v10.md)。  
对于支持 Grafana 8.x 版本的 Grafana 工作区，请参阅[使用 Grafana 版本 8](using-grafana-v8.md)。

节点图面板可视化定向图形或网络。面板使用定向力布局来有效定位节点，有助于显示复杂的基础设施图、层次结构或运行图。

## 数据要求
<a name="v9-panels-node-graph-requirements"></a>

节点图面板需要数据的特定形状才能显示其节点和边。并非每个数据来源或查询都可以在此面板中可视化。

节点图可视化由*节点*和*边*组成。
+ *节点*显示为圆形。从应用程序的角度来看，节点可能代表应用程序、服务或其他任何相关的内容。
+ *边*显示为一条连接两个节点的线。连接可能是请求、运算或两个节点之间的某种其他关系。

节点和边都可以具有关联的元数据或统计数据。数据来源定义了显示哪些信息和值，因此不同的数据来源可以显示不同类型的值，也可以不显示某些值。

## Nodes
<a name="v9-panels-node-graph-nodes"></a>

通常，节点在节点内部显示两个统计值，在节点正下方显示两个标识符，通常是名称和类型。节点还可以在节点周围用彩色圆圈显示另一组数值，不同颜色的部分代表不同的数值，这些数值相加应为 1。例如，您可以用圆圈的红色部分表示误差百分比。

其他详细信息可以显示在上下文菜单中，该菜单会在您选择节点时显示。上下文菜单中还可以有其他链接，这些链接可以指向 Grafana 工作区的其他部分或任何外部链接。

**注意**  
节点图只能显示 1500 个节点。如果超过此限制，则右上角会显示一条警告，某些节点会被隐藏。您可以单击图形中的**隐藏节点**标记，展开图形的隐藏部分。

## Edges
<a name="v9-panels-node-graph-edges"></a>

当您将鼠标悬停在边上时，边也可以显示统计数据。与节点类似，您也可以选择边以打开包含其他详细信息和链接的上下文菜单。

支持此可视化的第一个 AWS X-Ray 数据源是其服务地图功能的数据源。有关更多信息，请参阅 [Connect 连接到 AWS X-Ray 数据源](x-ray-data-source.md)。

## 浏览节点图
<a name="v9-panels-node-graph-navigation"></a>

通过选择任何节点或边的外部并拖动指针，可以在节点图内平移。

您可以使用节点图左上角的按钮进行缩放。

**隐藏节点**

为了保持合理的性能，在给定时间显示的节点数量是有限的。超出此限制的节点隐藏在可点击的标记后面，这些标记显示连接到该边的隐藏节点的大致数量。您可以选择标记来围绕该节点展开图形。

**网格视图**

您可以切换到网格视图，以便更好地了解图形中最有趣的节点。网格视图显示网格中没有边的节点，可以按节点内部显示的统计数据或节点的彩色边框表示的统计数据进行排序。

要对节点进行排序，请选择图例中的统计数据。统计数据名称旁边的标记显示当前用于排序和排序方向的统计数据。

选择节点，然后选择**在图形布局中显示**选项，切换回图形布局，将焦点放在所选节点上，以在整个图形的上下文中显示该节点。

## 数据 API
<a name="v9-panels-node-graph-data-api"></a>

这种可视化需要从数据来源返回特定形状的数据，以便正确显示。

节点图至少需要一个描述图形边缘的数据帧。默认情况下，节点图将根据此数据帧计算节点和任何统计数据。（可选）如果需要显示更多特定于节点的元数据，则可以发送描述节点的第二个数据帧。您必须在两个数据帧上设置 `frame.meta.preferredVisualisationType = 'nodeGraph'`，或将其分别命名为 `nodes` 和 `edges`，这样才能渲染节点图。

**结构中的边数据**

必填字段：


| 字段名称 | Type | 说明 | 
| --- | --- | --- | 
|  id  |  字符串  |  边的唯一标识符。  | 
|  source  |  字符串  |  来源节点 ID。  | 
|  target  |  字符串  |  目标 ID。  | 

可选字段：


| 字段名称 | Type | 说明 | 
| --- | --- | --- | 
|  mainstat  |  字符串/数字  |  将鼠标悬停在边上方时，第一个统计数据显示在叠加层中。可以是按原样显示值的字符串，也可以是数字。如果是数字，则还会显示与该字段关联的任何单位  | 
|  secondarystat  |  字符串/数字  |  与 MainStat 相同，但显示在其正下方。  | 
|  detail\$1\$1\$1  |  字符串/数字  |  单击边时，任何前缀为 `detail__` 的字段都将显示在上下文菜单的标题中。将 `config.displayName` 用于更易读的标签。  | 

**结构中的节点数据**

必填字段：


| 字段名称 | Type | 说明 | 
| --- | --- | --- | 
|  id  |  字符串  |  节点的唯一标识符。边在其来源和目标字段中引用此 ID。  | 

可选字段：


| 字段名称 | Type | 说明 | 
| --- | --- | --- | 
|  删除实例快照  |  字符串  |  节点正下方可见的节点名称。  | 
|  subtitle  |  字符串  |  标题下显示的附加名称、类型或其他标识符。  | 
|  mainstat  |  字符串/数字  |  第一个统计数据显示在节点中。可以是按原样显示值的字符串，也可以是数字。如果是数字，则还会显示与该字段关联的任何单位。  | 
|  secondarystat  |  字符串/数字  |  与 MainStat 相同，但显示在节点中的下方。  | 
|  arc\$1\$1\$1  |  数字  |  任何前缀为 `arc__` 的字段都将用于在节点周围创建彩色圆圈。这些字段中的所有值加起来应为 1。您可以使用 `config.color.fixedColor` 指定颜色。  | 
|  detail\$1\$1\$1  |  字符串/数字  |  单击节点时，任何前缀为 `detail__` 的字段都将显示在上下文菜单的标题中。将 `config.displayName` 用于更易读的标签。  |