拓扑图

拓扑图的入口路径

在编辑状态下点击拓扑图组件即可对其进行配置，配置内容分为样式、数据和交互三个Tab。（本节仅介绍拓扑图特有属性的配置，基础图表共性的配置请参考下文“组件配置”）

组件背景

在大屏制作中，有时会需要展示节点与边的关系，比如电网中电流流向，网络中数据流向等。在这些情况下通常会采用自定义组件来做定制化开发，但对于通用型的功能，我们提供了拓扑图的组件，来支持这些需求。在此组件中，节点和边的位置是固定的，也不一定有严格拓扑结构，可以存在环或森林，这一点与学术意义上的拓扑图并不完全相同。通常认为，一张图等于节点加边。在此组件中，需要先确定节点和边的位置，再进行数据绑定以及样式设置。

布局功能

在配置栏中点击编辑布局按钮可以打开编辑窗，从左侧可以将节点拖到画布中并调整位置。 单击选中节点时，右侧会显示节点相关信息，id用来绑定数据，class（类型）用来设置样式

• alt + g切换是否显示grid（会影响节点移动步长）
• alt + t 切换移动时是否吸附
• alt + u 切换边在节点上还是下（边在节点上时，会影响同一连接桩拖出多根线）

样式配置

在配置栏中可以配置一些全局样式，如画布尺寸、画布倾斜等等。画布尺寸为布局的展示区域，与组件的大小无关（如果了解svg的话，可以理解为viewbox）

数据绑定

当前的数据格式需要手动制造，数据中需要数据类型字段，来判断是点(node)还是边(edge)的数据，此外id字段用来匹配布局中节点或边的id。对于节点，由id对应数据后，可以在条件样式中，依据不同状态配置不同显示样式。特别地，当节点不跟随视角变换时，可以设置锚点，以确定最终显示位置。对于边，由id对应数据后，可以在条件样式中，依据不同状态和值显示不同样式。

以这个简单的数据为例，就是对id为"aaa"的节点(node)，状态为abc。会对下面的配置生效