配置节点编程_节点编程使用说明_DataV数据可视化-阿里云

节点编程一般称为visual programming或者flow based programming，即通过可视化连线的方式，定义图层与图层之间的交互行为。本文档为您介绍DataV新增的配置节点编程功能的使用方法，帮助您自由管理大屏中多个组件之间的交互关系。

节点编程的优势

节点编程区别于之前的回调id，可以保证交互和数据的实时性和同步性。
节点编程支持数据请求合并和数据分发的功能。
节点编程可模块化拆分，专注单个的交互链路，不需要考虑代码的整理和规范，只需要专注于业务规则和交互需求即可。
节点编程支持原厂组件和第三方组件。该功能对开发者型用户较为便利。

注意用户自行开发的第三方组件必须是在遵循开发者规范的前提下，才能在DataV中的节点编程页面无缝衔接使用。

前提条件

在开始配置节点编程之前，请先准备好组件的交互需求，并将需要交互的组件在大屏编辑器中搭建完成，详情请参见添加组件。

操作步骤

登录DataV控制台，进入我的可视化页面。
移动鼠标至控制台中已经开发完成的大屏项目上，单击右上角的节点编程配置图标（或者单击编辑，进入大屏编辑页面，再单击右上角的配置节点编程图标）。
在管理节点编程页面，完成组件的交互配置，包括组件连线、规则配置等。详细操作方法请参见下文的操作示例和详细功能介绍。
配置完成后，单击右下角的预览图标查看交互效果，然后单击右上角的应用图标将效果应用到大屏中。

操作示例

下面以Tab列表和通用标题组件为例，为您演示节点编程功能的具体使用方法。

整理Tab列表和通用标题组件的交互需求。
例如单击Tab列表中的某一列，可将该列表项中的文本直接显示在通用标题组件上。
在可视化大屏编辑器页面搭建所需要的Tab列表和通用标题组件。
单击大屏编辑页面右上角的配置节点通信图标。
在管理节点编程页面，将右侧的Tab列表和通用标题节点拖至画布上并连线。
鼠标移至连线上，单击+ > 新增触发器，添加一个触发器。
在触发器设置页面，配置触发器，设置单击可执行的触发条件。
上图中的示例触发条件如下。
```
return data.id>1;
```
同样的方式添加一个转换器并进行配置，将列表的数据格式转换成标题的数据格式。
上图中的示例转换规则如下。
```
return [
 {
   value:data.content
 }
];
```
单击右下角的预览图标，在预览页面进行交互操作（例如单击列表某一格等），查看交互效果。

如果需求中有多个组件需要配置交互链路，则重复以上几步直至满足全部交互需求。
配置并预览成功后，单击左上角的应用图标，将交互配置应用到大屏页面上。
预览并发布大屏，即可在线展示具有交互功能的大屏。

详细功能介绍

在节点编程页面，您可以完成以下操作。

添加或删除图层节点：单击页面左侧图层列表中的某个图层节点，拖动节点或单击节点右侧的+，都可以将节点添加到画布中。选中某个节点，单击上方的删除，或者单击右键选择从画布中移除删除当前选中的节点。

注意删除后节点将无法恢复，请谨慎操作。
聚焦图层节点：鼠标移动至图层节点上，单击右侧的聚焦图标，可以使该图层及其关联节点聚焦在画布中央显示。
停用/启用：右键单击某个节点，选择停用/启用，或者单击上方菜单栏中的停用/启用图标，暂时停用或启用交互链路的某个节点、某个图层、某个规则组。
多选/框选节点或连线：
- 多选节点或连线：Mac用户使用快捷键Command加鼠标单击， Windows用户使用快捷键Ctrl加鼠标单击。
- 框选节点或连线：使用空格快捷键加单击鼠标框选，一次框选多个节点或连线，进入框选状态后，再次单击空格键退出框选状态。
交互连线：您可以使用连线功能来触发两个节点之间的数据交互。单击源节点的锚点，拖出一条连线，连接到目标节点的锚点上。

说明源节点事件只能抛出，所以是起始锚点；目标节点动作只能被触发，所以是目标锚点。
删除连线：右键单击某一条连线，选择删除即可删除该连线。
缩放画布：通过画布缩放功能，您可以查看详细的节点内容或者完整的画布样式。单击画布上方菜单栏中的+、-，或者在画布内滑动鼠标滚轮，实现画布的缩放。
适配画布：单击画布上方菜单栏中的适配画布图标，将画布中的节点自适应到画布中间显示。
规则器功能介绍：规则器类型包括触发器和转换器两种。
- 触发器：用于触发与否的判定。
  例如操作示例的Tab列表与通用标题中使用的触发器，当触发器编辑面板中的触发条件代码为return data.id > 1时，只有当所单击的Tab列表的数据id大于1时，才能将Tab列表的数据传递到标题组件上，否则触发条件失败，交互链路终止，数据无法传递。
- 转换器：用于交互数据格式转换。
  例如操作示例的Tab列表与通用标题中使用的转换器，当转换器编辑面板中的代码为return [{ value: data.content}]时，Tab列表的数据格式才能成功转换成通用标题的格式。
说明交互链路中的规则定义规则器为串行处理，同一交互链路可叠加多个规则器，同类规则器可成组。
- 新增规则器节点：鼠标移至连线上，单击连线中间的+号，选择新增触发器/新增转换器，可新增一个触发器或者转换器。
- 删除规则器节点：右键单击规则器，选择删除即可删除规则器。
  
  注意规则器删除后不可恢复，且会同时删除节点和两边连线，请谨慎操作。
- 编辑规则器：下面以编辑转换器为例，触发器与转换器的配置属性基本一致。
  单击一个转换器，在右侧的转换器设置面板可配置转换器中的多个属性。
  - 新建多个转换器：在转换器的转换器设置页面，单击转换器组下方新增转换器即可在该连线的节点位置添加多个转换器。
  - 重命名和删除当前转换器：单击转换器框内的重命名/删除图标即可修改转换器名称或删除不需要的转换器。
  - 配置转换器交互并保存或存为模板
    1. 单击转换器组右侧的下拉箭头，展开转换器数据框，输入交互数据。
    2. 单击下方保存，保存当前组件的交互。
    3. 单击下方的另存为模板，将该转换器保存为模板，方便后期多次调用。
- 添加模板转换器节点：单击上方菜单栏的规则器图标，在左侧的转换器模板列表中，选择一个转换器模板拖拽到规则器节点上，即可快速添加一个已配置的转换器。
  说明
  - 规则器模板按工作空间存储，同一工作空间共享规则器模板，可编辑、删除别人保存的规则器模板。
  - 规则器被保存为模板后，编辑模板中的规则器，不会影响画布中已有的规则器。
- 编辑或删除规则器模板：下面以编辑转换器模板为例。
  - 鼠标移至转换器模板上，单击右侧的编辑图标，在编辑用户转换器模板弹出框中，可修改模板名称和内容。
    
    说明系统规则器模板不支持编辑和删除。
  - 鼠标移至转换器模板上，单击右侧的删除图标即可删除该模板。
- 排序规则器：下面以排序转换器为例。
  右键单击转换器节点组，选择编辑，在转换器设置面板的转换器组区域，上下拖动转换器来进行排序。
- 删除规则器：下面以删除转换器为例。
  - 删除转换器组：右键单击转换器节点组，选择删除。
  - 删除某一个转换器：右键单击转换器节点组，选择编辑，在转换器设置面板的转换器组区域，鼠标移至要删除的转换器上，单击右侧的删除图标。
效果预览：单击右下角的预览图标，即可查看当前画布中配置的组件交互效果。预览完成后单击预览页面右上方的X号取消预览。

说明您也可以在预览模式下进行交互调试，调试过程不影响外部编辑器中的配置。
日志查看功能：在节点预览页面中，单击左上角的查看日志，可查看各阶段的数据流转详情。
效果应用：节点交互配置成功后，单击页面右上方的应用图标，将配置的组件交互效果应用到外部编辑器大屏中。

注意交互效果应用到大屏中后，会覆盖编辑器中原有的交互配置，但不影响已保存的快照交互。

当配置完成的组件节点编程交互应用到外部编辑器后，在DataV中后期流通的时候（包括复制组件、收藏组件以及拷贝项目给他人），该组件的节点交互配置都会跟随该组件一起携带使用。