节点图
当您需要可视化相互关联的元素时，节点图非常有用。通过为每个要可视化的元素显示圆形（即 节点），并使用线条（即 边）连接这些节点来实现。该可视化使用有向力布局，将节点定位到连接的圆形网络中。
节点图显示每个节点的有用信息以及它们之间的关系，使您可以可视化复杂的基础设施图、层级结构或执行图。
节点和边的外观也可以通过多种方式自定义，包括颜色、边框和线条样式。
如果您需要显示以下内容，可以使用节点图可视化：
- 解决方案拓扑
- 网络
- 基础设施
- 组织结构图
- 关键路径图
- 族谱
- 思维导图
配置节点图可视化
以下视频提供了创建节点面板可视化的初学者步骤。您将了解数据要求和注意事项、特殊自定义等等
支持的数据格式
要创建节点图，您需要两个数据集：一个包含要显示元素（节点）的记录，另一个包含这些元素之间连接（边）的记录。
节点数据集
节点数据集必须包含一个字母数字 ID 字段，为每个元素提供唯一的标识符。可视化还接受其他选项字段，用于标题、副标题、主要和次要统计信息、圆形边框绘制多少的弧信息、详细信息、颜色、图标、节点大小以及元素高亮指示器。有关这些字段的更多信息和命名约定，请参阅节点数据帧结构部分。
示例
| id | 标题 | 副标题 | 主统计 | 副统计 | 颜色 | 图标 | 高亮 |
|---|---|---|---|---|---|---|---|
| node1 | PC | Windows | AMD | 16GB 内存 | 蓝色 | true | |
| node2 | PC | Linux | Intel | 32GB 内存 | 绿色 | eye | false |
| node3 | Mac | MacOS | M3 | 16GB 内存 | 灰色 | apps | false |
| node4 | 独立 | 很孤独 | 就在这里 | 未连接 | 红色 | false |
如果图标字段包含值，则会显示该图标而不是标题和副标题。有关可用图标列表，请参阅图标概述。
边数据集
与节点数据集类似，边数据集需要一个唯一的 ID 字段用于每个关系，后跟两个字段，包含边的源节点和目标节点；也就是说，边连接的节点。其他可选字段为主统计和副统计、上下文菜单元素、线条粗细、高亮指示、线条颜色以及将连接转换为虚线的配置。有关这些字段的更多信息和命名约定，请参阅边数据帧结构部分。
示例
| id | 源 | 目标 | 主统计 | 副统计 | 粗细 | 高亮 | 颜色 |
|---|---|---|---|---|---|---|---|
| edge1 | node1 | node2 | 主要 | 次要 | 3 | true | 青色 |
| edge2 | node3 | node2 | 主要2 | 次要2 | 1 | false | 橙色 |
如果一个节点没有边连接，它将独立显示在网络之外。
数据要求
节点图需要数据源返回特定形状的数据才能正确显示其节点和边。这意味着并非所有数据源或查询都可以通过此图表可视化。如果您希望将其用作数据源开发者，请参阅有关数据 API 的部分。
节点图由 节点 和 边 组成。
- 节点 显示为圆形。节点可以代表应用程序、服务或从应用程序角度相关的任何其他内容。
- 边 显示为连接两个节点的线条。连接可以是请求、执行或两个节点之间的其他关系。
节点和边都可以关联元数据或统计信息。数据源定义显示哪些信息和值，因此不同的数据源可以显示不同类型的值或不显示某些值。
节点
注意
节点图最多只能显示 1,500 个节点。如果超出此限制，右上角将显示警告，并且部分节点将被隐藏。您可以通过单击图表中的“隐藏节点”标记来展开图表的隐藏部分。
通常，节点内部显示两个统计值，节点正下方显示两个标识符（通常是名称和类型）。节点还可以将另一组值显示为节点周围的彩色圆圈，不同颜色的部分代表不同的值，这些值加起来应为 1。
例如，您可以使用圆圈的红色部分表示错误百分比。单击节点时显示的上下文菜单中可以显示更多详细信息。上下文菜单中还可以包含指向 Grafana 其他部分或任何外部链接的附加链接。
边
将鼠标悬停在边上时，边也可以显示统计信息。与节点类似，您可以通过单击边来打开包含更多详细信息和链接的上下文菜单。
第一个支持此可视化的数据源是 X-Ray 数据源，用于其服务图功能。有关更多信息，请参阅X-Ray 插件文档。
节点图导航
您可以使用平移、缩放及其他功能来导航节点图。
平移
您可以通过点击任何节点或边外部并拖动鼠标来平移视图。
缩放
使用右下角的按钮放大或缩小。您还可以使用鼠标滚轮或触摸板滚动，同时按住 Ctrl 或 Cmd 键进行操作。
隐藏节点
给定时间显示的节点数量有限，以保持合理的可视化性能。当前不可见的节点隐藏在可点击的标记后面，这些标记显示与特定边连接的隐藏节点的近似数量。您可以单击标记来展开该节点周围的图表。
网格视图
您可以切换到网格视图，以便更好地概览图中最重要的节点。网格视图以网格形式显示节点，不显示边，并且可以按节点内部显示的统计信息或节点彩色边框表示的统计信息进行排序。
要对节点进行排序，请点击图例中的统计信息。统计信息名称旁边的标记显示当前用于排序的统计信息和排序方向。
点击节点并选择“在图布局中显示”选项，可以切换回图布局并聚焦于选定的节点，以便在整个图表的上下文中显示它。
配置选项
以下部分描述了此可视化在面板编辑器窗格中可用的配置选项。这些选项尽可能按照它们在 Grafana 中的显示顺序排列。
面板选项
在面板编辑器窗格的面板选项部分，设置面板标题和描述等基本选项，以及面板链接。要了解更多信息，请参阅配置面板选项。
节点图选项
使用以下选项来优化您的节点图可视化。
- 缩放模式 - 选择节点图应如何处理缩放和滚动事件。
节点选项
节点选项部分提供节点行为的配置。
- 主统计单位 - 选择主统计在图表节点中显示的单位。
- 副统计单位 - 选择副统计在图表节点中显示的单位。
- 弧段 - 配置哪些字段定义节点周围彩色圆圈的大小，并为每个字段选择颜色。您可以添加多个字段。
注意
定义弧段将覆盖在节点数据帧结构的可选字段部分中描述的
arc__*和color字段的自动检测。
边选项
边选项部分提供节点边行为的配置。
- 主统计单位 - 选择主统计在图表边中显示的单位。
- 副统计单位 - 选择副统计在图表边中显示的单位。
数据链接
数据链接允许您在保持源面板上下文的同时链接到其他面板、仪表盘和外部资源。您可以创建包含系列名称或甚至光标下方值的链接。
注意
此可视化不支持操作。
对于每个数据链接，设置以下选项
- 标题
- URL
- 在新标签页中打开
要了解更多信息，请参阅配置数据链接和操作。
在节点图中，某些数据字段可能具有预配置的数据链接。在这些情况下，要添加不同的数据链接，请使用字段覆盖。
字段覆盖
覆盖允许您自定义特定字段或系列的可视化设置。添加覆盖规则时，它会针对一组特定的字段，并允许您定义该字段的多种显示方式选项。
选择以下覆盖选项
| 选项 | 描述 |
|---|---|
| 按名称选择字段 | 从所有可用字段列表中选择一个字段。 |
| 按正则表达式匹配名称选择字段 | 使用正则表达式指定要覆盖的字段。 |
| 按类型选择字段 | 按类型选择字段，如字符串、数字或时间。 |
| 按查询返回选择字段 | 选择特定查询返回的所有字段，例如 A、B 或 C。 |
| 按值选择字段 | 选择由您定义的聚合器条件返回的所有字段，例如 Min、Max、Count、Total。 |
要了解更多信息，请参阅配置字段覆盖。
数据 API
此可视化需要数据源返回特定形状的数据才能正确显示。
节点图至少需要一个描述图表边的 dataframe。默认情况下，节点图将基于此 dataframe 计算节点和任何统计信息。如果需要显示更多节点特定的元数据，可以选择发送第二个描述节点的 dataframe。您必须在两个 dataframe 上设置 frame.meta.preferredVisualisationType = 'nodeGraph'，或分别将它们命名为 nodes 和 edges，以便节点图正确渲染。
边数据帧结构
必需字段
| 字段名 | 类型 | 描述 |
|---|---|---|
| id | string | 边的唯一标识符。 |
| 源 | string | 源节点的 ID。 |
| 目标 | string | 目标节点的 ID。 |
可选字段
| 字段名 | 类型 | 描述 |
|---|---|---|
| 主统计 | string/number | 鼠标悬停在边上时，在浮层中显示的首个统计信息。它可以是按原样显示值的字符串，也可以是数字。如果是数字，则也会显示与该字段关联的单位。 |
| 副统计 | string/number | 与 mainStat 相同，但显示在其正下方。 |
| detail__* | string/number | 任何以 detail__ 为前缀的字段将在单击边时显示在上下文菜单的头部。使用 config.displayName 获取更具可读性的标签。 |
| 粗细 | number | 边的粗细。默认值: 1 |
| 高亮 | boolean | 设置边是否应高亮显示。例如，通过高亮显示多个节点和边来表示图中的特定路径，这非常有用。默认值: false |
| 颜色 | string | 设置边的默认颜色。它可以是可接受的 HTML 颜色字符串。默认值: #999 |
| strokeDasharray | string | 设置用于渲染边的虚线和间隙模式。如果未设置，则使用实线作为边。有关更多信息和示例，请参阅stroke-dasharray MDN 文档。 |
注意
从 10.5 版本开始，
highlighted已被弃用。它将在未来的版本中移除。请改用color来指示高亮边的状态。
节点数据帧结构
必需字段
| 字段名 | 类型 | 描述 |
|---|---|---|
| id | string | 节点的唯一标识符。此 ID 在边的源和目标字段中被引用。 |
可选字段
| 字段名 | 类型 | 描述 |
|---|---|---|
| 标题 | string | 节点下方可见的节点名称。 |
| 副标题 | string | 标题下方显示的附加名称、类型或其他标识符。 |
| 主统计 | string/number | 节点内显示的第一个统计数据。它可以是按原样显示值的字符串，也可以是数字。如果是数字，还会显示与该字段关联的任何单位。 |
| 副统计 | string/number | 与 mainStat 相同，但显示在节点内的 mainStat 下方。 |
| arc__* | number | 任何带有 arc__ 前缀的字段都将用于创建节点周围的彩色圆环。这些字段中的所有值总和应为 1。您可以使用 config.color.fixedColor 指定颜色。 |
| detail__* | string/number | 任何带有 detail__ 前缀的字段都将在单击节点时显示在上下文菜单的标题中。使用 config.displayName 可以显示更具可读性的标签。 |
| 颜色 | string/number | 可用于指定单一颜色，而不是使用 arc__ 字段来指定颜色部分。它可以是应为可接受的 HTML 颜色字符串的字符串，也可以是数字，在这种情况下，行为取决于 field.config.color.mode 设置。例如，这可用于创建由字段值控制的渐变颜色。 |
| 图标 | string | 在节点内部显示的图标名称，而不是默认统计数据。只允许使用 Grafana 内置图标)。 |
| 节点半径 | number | 半径值，以像素为单位。用于管理节点大小。 |
| 高亮 | boolean | 设置节点是否应高亮显示。例如，通过高亮显示多个节点和边来表示图中的特定路径。默认值：false |
