一、需要背景
产品成立之初，产品的需要是须要对各种指标进行公式运算，组合成一个新的复合指标，供后续应用。过后产品提出的模式是有两种：
一种是间接让用户输出，不作任何其余操作，但这种形式带来的问题一个是，须要前端对公式进行简单的校验，太多不可控的问题，另一个是操作指导性很弱，用户在应用的时候没有任何限度，也并不太能明确如何操作；
另一种形式就是让用户通过拖拽的形式，增加运算符，去组成本人须要的公式，比拟直观，且视觉效果更好，所以最终产品交互选定用这种形式。
二、选型思考
复合指标的高级模式性能点合成：拖拽指标、新增运算符，设置指标的过滤条件，设置条件的过滤，去更新数据；节点新增后，从新计算地位，更新渲染。
对于拖拽后生成一个节点、且有序排列，针对以后节点新增前后节点，使其参差排列，技术范畴确定到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、提交
遍历所有的数据，将层级信息字段去掉；对一些为空字段做过滤解决；将一些额定字段整顿到节点数据中去；对画布上的现有公式的合法性做出校验，若是不非法公式则弹出提醒。格式化实现后则可容许用户将画布中的数据提交到后端。