共计 2773 个字符，预计需要花费 7 分钟才能阅读完成。
一、需要背景
产品成立之初，产品的需要是须要对各种指标进行公式运算，组合成一个新的复合指标，供后续应用。过后产品提出的模式是有两种：
一种是间接让用户输出，不作任何其余操作，但这种形式带来的问题一个是，须要前端对公式进行简单的校验，太多不可控的问题，另一个是操作指导性很弱，用户在应用的时候没有任何限度，也并不太能明确如何操作；
另一种形式就是让用户通过拖拽的形式，增加运算符，去组成本人须要的公式，比拟直观，且视觉效果更好，所以最终产品交互选定用这种形式。
二、选型思考
复合指标的高级模式性能点合成：拖拽指标、新增运算符，设置指标的过滤条件，设置条件的过滤，去更新数据；节点新增后，从新计算地位，更新渲染。
对于拖拽后生成一个节点、且有序排列，针对以后节点新增前后节点，使其参差排列，技术范畴确定到 G6、X6 下面。但对于是选用 G6 还是 X6，从以下五个方面思考：
1、针对上述需要合成，能够看到咱们这个需要是并重数据编辑的，而官网对于 G6、X6 的倡议是，G6 偏差于图可视化和剖析，X6 偏差于图编辑和数据编辑
2、自定义能力大小。因为指标治理中的节点并非只是个节点，而是可能是指标、操作符、输入框，形式多样，且，指标类型的节点须要展现的信息比拟多，外面蕴含了图片、色彩、文本等信息，如果应用 X6 是能够间接用 html 写的，而应用 G6 就要相熟理解 canvas，新版本的 G6 能够反对 jsx 语法自定义节点，但并没有反对的那么好。
3、数据量大小。如果是节点繁多，图的规模较大，想要交互晦涩，当然是用 canvas 的 G6 更适合，但如果数据量比拟小，则都能够。
4、是否须要统计图表节点：G6 反对嵌入 G2 的统计图到一个节点中，而以后需要是不须要嵌入图表节点
5、是否须要反对挪动端 / 小程序：在挪动端，G6 能够反对展现和简略交互，且在不断完善中。而且挪动端、小程序对性能的要求更高，所以如果是要反对挪动端或小程序会优选 G6
三、指标治理中复合指标的应用
对于 X6 在数栈指标治理的利用，次要是在复合指标的新增、编辑、删除模块，其中，分为一般、高级两种模式，其区别是：
一般模式仅可单公式，例如 (A+B)*0.3；
而高级模式则能够配置多公式，例如当 A >= 0 时，(A+B)0.3；当 A < 0 时，(A+C-B)0.4；
而本文次要叙述的是高级模式的相干内容，对于其操作，次要分为以下几个方面：
1、新增
图 3 -1
参考图 3 -1，能够点击“新增公式”新增一条蕴含条件和公式的单公式；拖动左侧指标目录中的指标到右侧对应区域，能够将指标增加到条件或者公式里去。
2、编辑
图 3 -2
图 3 -3
图 3 -4
图 3 -5
如图 3 - 2 所示，咱们能够点击对应指标将其选中，对这个选中指标进行后果过滤设置；如图 3 - 3 所示，咱们能够点击条件右上角的“设置”按钮，对以后条件进行后果过滤设置；能够点击条件或者公式后的图标，对条件名、公式名进行编辑；如图 3 - 5 所示，点击维度设置，能够对以后所有退出到画布中的指标的公共维度进行设置，与此同时选中某一个指标，能够对以后选中指标进行维值过滤设置。
3、删除
图 3 -6
图 3 -7
如图 3 - 5 所示，能够在选中某一个指标之后，点击窗口右上角的“删除”按钮，将选中指标从以后公式中删除，最终失去的后果如图 3 - 6 所示；同样能够点击公式左边的删除图标，会将以后一整条公式（蕴含条件、公式）都删除。
4、查看
查看是指从指标列表里的某个复合指标右侧的“编辑”操作进入编辑页面，能够看到上次保留的配置好的公式信息，选中不同指标、点击不同条件的设置，会回显出上一次你保留的后果过滤信息。
四、X6 的具体应用
新手入门疾速上手点这里：疾速上手 | X6
而对于两种模式的实现区别则是数据处理上的区别，外围应用步骤有以下几点：
1、确定数据结构
高级模式下能够只配置一条公式，然而也能够通过点击新增公式按钮减少多条公式，公式数量下限为 5 条。对于 X6 来说，对 HTML 的反对、自定义的能力都是很不错的，所以对于自定义成果比拟高的指标治理中的节点，咱们依据视觉效果能够定出整体数据结构为
// 指标根底信息
const indexInfo = {
name: '',
code: '',
status: '',
...
}
// 高级模式数据结构
const advancedFormula = [
...
{
condition: {
name: '条件 1',
conditionSet: {},
formulaList: [
{
type: 'index', // index-- 指标节点 operator-- 运算符节点
value: '', // 当 type 为 operator，且 value 有值时, 则有数值输入框类型
...indexInfo
}
]
},
formula: {
name: '公式 1',
formulaList: [
{
type: 'index', // index-- 指标节点 operator-- 运算符节点
value: '', // 当 type 为 operator，且 value 有值时, 则有数值输入框类型
...indexInfo
}
]
}
}
]2、从数据结构到视图的渲染过程
这个过程次要是调用 X6 的 API 中提供的 graph.addNode 办法去增加节点到画布。
但首先要遍历数据结构解决为带着层级信息的数据，而后通过遍历数据结构，并同时将层级关系和指标信息退出到节点信息里，以确保在操作新增、编辑等操作时能够精确获取到层级信息，可能筹备新增、插入、编辑节点信息。
drawAdvancedNode = (data: any) => {
// 画高级模式的层级构造，从单条公式父框 ---> 单条公式的条件 + 单条公式的公式 -----> 具体的操作、指标
if (data.length === 0) {return false;}
// 遍历数据结构调用 graph.addNode 办法增加对应节点到画布中: 计算每个节点对应的具体 x、y 坐标
};3、更新
更新的过程次要是在进行了新增、插入、编辑等操作后，会更改原数据，生成一份新的数据，这时候须要拿到新的数据进行从新渲染，须要将画布上的内容清空，而后从新绘制，而波及到画布清空会用到 clearCells 办法，但高级模式会存在层级，所以会发现，应用这个办法并不能无效的把画布清空，所以最终先将所有节点获取到，再一一移除。在移除之后，将以后新数据渲染到画布中，即反复步骤 2 中的操作
// 清空所有画布中的节点
const allNodes = this.state.graph.getCells();
allNodes.map((item: any) => {this.state.graph.removeCell(item.id);
});4、提交
遍历所有的数据，将层级信息字段去掉；对一些为空字段做过滤解决；将一些额定字段整顿到节点数据中去；对画布上的现有公式的合法性做出校验，若是不非法公式则弹出提醒。格式化实现后则可容许用户将画布中的数据提交到后端。