DvSankeyHelper

静态桑基树图中的辅助函数集合

辅助类

standardChart.helper.sankeyHelper.handlePcFormatter(opts1, opts2, opts3，theme)

opts1

• 参数
  { width: 363, name: '同花顺', text: '2022一季报' }
• 描述 节点label配置信息
• 备注 label formatter依赖参数
• 代码示例如下

opts2

• 参数
  { name: 'xx业务', compare: 0, depth: 0, num: 8.00, root: false, itemStyle: { color: '#FF2436', opacity: 0.84 } }
• 描述 option.series[key].data中的子元素信息
• 备注 label formatter依赖参数

opts3

• 参数
  { param1: 'num', param2: 'nuit', param3: 'compare' }
• 描述 自定义label内容固定位置所展示的属性

theme

• 参数 dark
• 描述 黑夜模式

代码示例

/**
 * 处理节点文本
 * @param arg1 根节点额外信息
 * @param arg2 节点信息
 * @param arg3 节点信息属性字段(方便业务自定义展示属性)
 * @param theme 主题
 * @returns
 */
export function handlePcFormatter(arg1: Arg1, arg2, arg3, theme) {
  const defaultArg3 = {
    param1: 'num',
    param2: 'unit',
    param3: 'compare'
  };
  const attrKey = Object.assign(defaultArg3, arg3);
  let rich = {};
  const labelFunction = ecParams => {
    let formatter;
    if (arg2.root == true) {
      const array = [];
      const horizontalImage = '{g|}';
      const text = `{a|${arg1.text}}`;
      const number = () => {
        const arg2Param3 = arg2[attrKey.param3] ?? ecParams.value[1];
        if (!arg2Param3 && arg2Param3 !== 0) {
          return `{b|${arg2.name}}{c|${ecParams.value[0] || arg2[attrKey.param1]}}${
            !arg2[attrKey.param2] ? '' : `{i|${arg2[attrKey.param2]}}`
          }`;
        } else {
          if (arg2Param3 >= 0) {
            return `{b|${arg2.name}}{c|${ecParams.value[0] || arg2[attrKey.param1]}}${
              !arg2[attrKey.param2] ? '' : `{i|${arg2[attrKey.param2]}}`
            }{d|+${arg2Param3}%}`;
          } else {
            return `{b|${arg2.name}}{c|${ecParams.value[0] || arg2[attrKey.param1]}}${
              !arg2[attrKey.param2] ? '' : `{i|${arg2[attrKey.param2]}}`
            }{h|${arg2Param3}%}`;
          }
        }
      };
      array.push(horizontalImage);
      array.push(text);
      array.push(number());
      formatter = array.join('\n');
    } else {
      // 处理其他节点的label
      let showLabelNum = 0;
      const otherNameWdith = new zrender.Text({
        style: {
          text: arg2.name,
          fontSize: 12
        }
      }).getBoundingRect().width;
      if (otherNameWdith > 72) {
        const dvNameArray = arg2.name.split('');
        for (let i = 0; i < dvNameArray.length; i++) {
          const w = new zrender.Text({
            style: {
              text: arg2.name.slice(0, i + 1),
              fontSize: 12
            }
          }).getBoundingRect().width;
          if (w > 60) {
            showLabelNum = i;
            break;
          }
        }
      }
      const array = [];
      const image = `${arg2.image ? `{g|}` : ''}`;
      const name = `{a|${
        showLabelNum === 0 ? arg2.name : `${arg2.name.slice(0, showLabelNum)}...`
      }}`;
      const number = () => {
        const arg2Param3 = arg2[attrKey.param3] && ecParams.value[1];
        if (!arg2Param3 && arg2Param3 != 0) {
          return `{d|${ecParams.value[0] || arg2[attrKey.param1]}}${
            !arg2[attrKey.param2] ? '' : `{i|${arg2[attrKey.param2]}}`
          }`;
        } else {
          if (arg2Param3 >= 0) {
            return `{d|${ecParams.value[0] || arg2[attrKey.param1]}}${
              !arg2[attrKey.param2] ? '' : `{i|${arg2[attrKey.param2]}}`
            }{b|+${arg2Param3}%}`;
          } else {
            return `{d|${ecParams.value[0] || arg2[attrKey.param1]}}${
              !arg2[attrKey.param2] ? '' : `{i|${arg2[attrKey.param2]}}`
            }{c|${arg2Param3}%}`;
          }
        }
      };
      if (image != '') {
        array.push(image);
      }
      array.push(name);
      array.push(number());
      formatter = array.join('\n');
    }

    return formatter;
  };

  if (arg2.root == true) {
    rich = {
      a: {
        color: theme === 'dark' ? 'rgba(255,255,255,0.6)' : 'rgba(0,0,0,0.6)',
        fontSize: 12,
        height: 12,
        padding: [4, 0, 0, 0],
        align: 'center',
        fontWeight: 600
      },
      b: {
        color: theme === 'dark' ? 'rgba(255,255,255,0.84)' : 'rgba(0,0,0,0.84)',
        fontSize: 14,
        height: 12,
        padding: [4, 0, 0, 0],
        align: 'center',
        fontWeight: 600
      },
      c: {
        color: arg2.itemStyle.color,
        fontSize: 14,
        fontWeight: 600,
        height: 12,
        padding: [4, 0, 0, 0],
        align: 'center'
      },
      d: {
        color: '#FF2436',
        fontSize: 10,
        verticalAlign: 'bottom',
        height: 10,
        align: 'center'
      },
      g: {
        align: 'center',
        verticalAlign: 'middle',
        backgroundColor: {
          image: arg2.image
        }
      },
      h: {
        color: '#07AB4B',
        fontSize: 10,
        verticalAlign: 'bottom',
        height: 7,
        align: 'center'
      },
      i: {
        color: arg2.itemStyle.color,
        fontSize: 14,
        height: 12,
        align: 'center',
        verticalAlign: 'bottom',
        fontWeight: 600
      }
    };
  } else {
    rich = {
      a: {
        color: theme === 'dark' ? 'rgba(255,255,255,0.84)' : 'rgba(0,0,0,0.84)',
        fontWeight: '600',
        fontSize: 12,
        align: arg1.depth && arg1.depth > arg2.depth ? 'right' : 'left',
        padding: arg2.num < 0 ? [1, 0, 0, 0] : [0, 0, 0, 0]
      },
      b: {
        color: '#FF2436',
        fontSize: 10,
        padding: [4, 0, -1, 1],
        verticalAlign: 'bottom'
      },
      c: {
        color: '#07AB4B',
        fontSize: 10,
        padding: [4, 0, -1, 1],
        verticalAlign: 'bottom'
      },
      d: {
        color:
          arg2.num < 0
            ? theme === 'dark'
              ? 'rgba(255,255,255,0.84)'
              : 'rgba(0,0,0,0.84)'
            : arg2.itemStyle.color,
        padding: arg2.num < 0 ? [4, 0, -1.5, 0] : [4, 0, -2, 0],
        fontSize: 14,
        fontWeight: 500,
        align: 'left',
        verticalAlign: 'bottom'
      },
      g: {
        width: 30,
        height: 30,
        align: 'center',
        backgroundColor: {
          image: arg2.image
        }
      },
      i: {
        color:
          arg2.num < 0
            ? theme === 'dark'
              ? 'rgba(255,255,255,0.84)'
              : 'rgba(0,0,0,0.84)'
            : arg2.itemStyle.color,
        padding: arg2.num < 0 ? [3, 4, -1.5, 1] : [0, 4, -2, 0],
        height: 14,
        fontSize: 14,
        fontWeight: 600,
        verticalAlign: 'bottom'
      }
    };
  }

  return {
    label: {
      formatter: labelFunction,
      rich: rich
    }
  };
}

standardChart.helper.sankeyHelper.handleFormatter(opts1, opts2, opts3)

opts1

• 参数
  { width: 363, name: '同花顺', text: '2022一季报' }
• 描述 节点label配置信息
• 备注 label formatter依赖参数

opts2

• 参数
  { name: 'xx业务', compare: 0, depth: 0, num: 8.00, root: false, itemStyle: { color: '#FF2436', opacity: 0.84 } }
• 描述 option.series[key].data中的子元素信息
• 备注 label formatter依赖参数

opts3

• 参数
  { param1: 'num', param2: 'nuit', param3: 'compare' }
• 描述 自定义label内容固定位置所展示的属性

standardChart.helper.sankeyHelper.handleTooltip(opts1，opts2)

opts1

• 参数 option.series[key]
• 描述 tooltip配置信息
• 备注 tooltip formatter依赖参数

opts2

• 参数
  { param1: 'num', param2: 'compare' }
• 描述 自定义label内容固定位置所展示的属性

代码示例

/**
 *
 * @param opts 节点信息
 * @param arg1 节点信息属性字段(方便业务自定义展示属性)
 * @returns
 */
export function handleTooltip(opts, arg1?) {
  const defaultPar = {
    param1: 'num',
    param2: 'compare'
  };
  const attrKey = Object.assign(defaultPar, arg1);
  return params => {
    let element;
    if (params.data.target) {
      element = opts.data.filter(ele => {
        return ele.name == params.data.target;
      });

      return `<div>
            <div style="font-size: 12px;color: rgba(255,255,255,0.84);line-height: 16px;">${
              params.data.target
            }</div>
            <div style="font-size: 12px;color:${
              element[0][attrKey.param1] < 0 ? 'rgba(225,225,255,0.84)' : element[0].itemStyle.color
            };line-height: 16px;margin-top:4px;font-weight:600;">
              <span>${element[0][attrKey.param1]}</span>
              <span style="position:relative;"><span style="position:absolute;top:4px;left: 0;width: 5px;height: 10px;display:inline-block;background-size:100% 100%;background-image: url(${
                element[0][attrKey.param2] == null || element[0][attrKey.param2] === ''
                  ? ''
                  : element[0][attrKey.param2] > 0
                  ? treeSankeyAdd
                  : element[0][attrKey.param2] == 0
                  ? ''
                  : treeSankeyReduce
              })"></span></span>
              <span style="margin-left:5px;color:${
                element[0][attrKey.param2] == null || element[0][attrKey.param2] === ''
                  ? ''
                  : element[0][attrKey.param2] >= 0
                  ? '#FF2436'
                  : '#07AB4B'
              }">${
        element[0][attrKey.param2] == null || element[0][attrKey.param2] === ''
          ? ''
          : element[0][attrKey.param2] >= 0
          ? '+' + element[0][attrKey.param2] + '%'
          : element[0][attrKey.param2] + '%'
      }</span>
            </div>
          </div>`;
    } else {
      return `<div>
            <div style="font-size: 12px;color: rgba(255,255,255,0.84);line-height: 16px;">${
              params.data.name
            }</div>
            <div style="font-size: 12px;color:${
              params.data[attrKey.param1] < 0
                ? 'rgba(255,255,255,0.84)'
                : params.data.itemStyle.color
            };line-height: 16px;margin-top:4px;font-weight:600;">
              <span>${params.data[attrKey.param1]}</span>
              <span style="position:relative;"><span style="position:absolute;top:4px;left: 0;width: 5px;height: 10px;display:inline-block;background-size:100% 100%;background-image: url(${
                params.data[attrKey.param2] == null || params.data[attrKey.param2] === ''
                  ? ''
                  : params.data[attrKey.param2] > 0
                  ? treeSankeyAdd
                  : params.data[attrKey.param2] == 0
                  ? ''
                  : treeSankeyReduce
              })"></span></span>
              <span style="margin-left:5px;color:${
                params.data[attrKey.param2] == null || params.data[attrKey.param2] === ''
                  ? ''
                  : params.data[attrKey.param2] >= 0
                  ? '#FF2436'
                  : '#07AB4B'
              }">${
        params.data[attrKey.param2] == null || params.data[attrKey.param2] === ''
          ? ''
          : params.data[attrKey.param2] >= 0
          ? '+' + params.data[attrKey.param2] + '%'
          : params.data[attrKey.param2] + '%'
      }</span>
            </div>
          </div>`;
    }
  };
}

standardChart.helper.sankeyHelper.handleLegend(opts1)

opts1

• 参数 [ { name: '营收', color: '#FF2436' }, { name: '成本/支出', color: '#29A6FF' }, { name: '利润', color: '#FF9500', }, { name: '同比', image: 'http://u.thsi.cn/imgsrc/share/05eb62f0c8c6c22b4b85eadb61b151d4.png' }, ]
• 描述 自定义legend配置信息

代码示例

/**
 *
 * @param opts legend信息
 * @param theme 风格
 * @returns
 */
export function handleLegend(opts, theme) {
  const elementsArray: Array<object> = [];
  // 计算自定义legend宽高
  const legendXArray: Array<number> = [];
  const textDistance: number = 14;
  const groupDistance: number = 14;
  opts.map(ele => {
    const group = new zrender.Group();
    group.add(
      new zrender.Rect({
        shape: {
          width: 6,
          height: 6
        }
      })
    );
    group.add(
      new zrender.Text({
        x: textDistance,
        style: {
          text: ele.name,
          fontSize: 12
        }
      })
    );
    legendXArray.push(group.getBoundingRect().width + groupDistance);
  });
  opts.map((ele, i) => {
    const sumWidth: number = summation(legendXArray.slice(0, i));
    if (ele.image) {
      elementsArray.push({
        type: 'group',
        x: sumWidth,
        children: [
          {
            type: 'image',
            style: {
              image: ele.image,
              y: -3,
              width: 12,
              height: 12
            }
          },
          {
            type: 'text',
            top: -2,
            left: textDistance,
            style: {
              fill: theme === 'dark' ? 'rgba(255,255,255,0.6)' : 'rgba(0,0,0,0.6)',
              text: ele.name,
              fontSize: 12
            }
          }
        ]
      });
    } else {
      elementsArray.push({
        type: 'group',
        x: sumWidth,
        children: [
          {
            type: 'rect',
            shape: {
              width: 6,
              height: 6,
              r: 1
            },
            style: {
              fill: ele.color
            }
          },
          {
            type: 'text',
            top: -2,
            left: textDistance,
            style: {
              fill: theme === 'dark' ? 'rgba(255,255,255,0.6)' : 'rgba(0,0,0,0.6)',
              text: ele.name,
              fontSize: 12
            }
          }
        ]
      });
    }
  });
  return {
    type: 'group',
    left: 10,
    top: 12,
    children: elementsArray
  };
}

standardChart.helper.sankeyHelper.handleLinks(opts1, opts2)

opts1

• 参数
• 描述 节点信息

opts2

• 参数
• 描述 links边信息

代码示例

/**
 * @param opts1 节点信息
 * @param opts2 links边信息
 * @returns
 */
type sourceObject = {
  name: string;
  value: number;
};
export function handleLinks(opts1, opts2) {
  const opts = JSON.parse(JSON.stringify(opts2));

  const sourceCountMap = handleElementNumber(opts2, 'source');
  const targetCountMap = handleElementNumber(opts2, 'target');
  // 枚举1-2
  // 筛选出对象中source属性值相同次数为2，并且target属性值相同次数为1
  let itemArray = opts2.filter(obj => {
    return sourceCountMap[obj.source] === 2 && targetCountMap[obj.target] === 1;
  });
  itemArray = itemArray.filter(obj => {
    return handleElementNumber(itemArray, 'source')[obj.source] === 2;
  });
  // 过滤出主要节点
  const sourceArr =
    itemArray.length > 1
      ? itemArray.map(ele => {
          return opts2.filter(item => ele.source === item.source || ele.target === item.target);
        })
      : [];
  // 枚举2-1
  // 筛选出对象中source属性值相同次数为1，并且target属性值相同次数为2
  let itemArray_TO = opts2.filter(obj => {
    return sourceCountMap[obj.source] === 1 && targetCountMap[obj.target] === 2;
  });
  itemArray_TO = itemArray_TO.filter(obj => {
    return handleElementNumber(itemArray_TO, 'target')[obj.target] === 2;
  });
  // 过滤出主要节点
  const sourceArr_TO =
    itemArray_TO.length > 1
      ? itemArray_TO.map(ele => {
          return opts2.filter(item => ele.source === item.source || ele.target === item.target);
        })
      : [];
  // 枚举2-2
  const itemArray_TT = opts2.filter(obj => {
    return sourceCountMap[obj.source] === 2 && targetCountMap[obj.target] === 2;
  });
  // 过滤出主要节点
  const sourceArr_TT = itemArray_TT.map(ele => {
    return opts2.filter(item => ele.source === item.source || ele.target === item.target);
  });
  let returnObj = opts;
  let newLinks = [];
  // 1 -> 2
  sourceArr.forEach(arr => {
    // 节点信息
    let nodeInfo = [];
    arr.map(item => {
      nodeInfo.push(...opts1.filter(ele => ele.name === item.source || ele.name === item.target));
    });
    nodeInfo = [...new Set(nodeInfo)].sort(arrayObjectSort('depth'));
    if (nodeInfo[0].num < 0 || nodeInfo[1].num < 0 || nodeInfo[2].num < 0) {
      if (
        numAdd(Math.abs(nodeInfo[0].num), Math.abs(nodeInfo[2].num)) ===
        Math.abs(nodeInfo[1].num).toString()
      ) {
        const customArr = [
          { source: nodeInfo[0].name, target: nodeInfo[1].name, value: nodeInfo[0].num },
          {
            source: nodeInfo[1].name,
            target: nodeInfo[2].name,
            value: nodeInfo[2].num,
            dvDirection: 'top'
          }
        ];
        arr.forEach(ele => {
          returnObj = returnObj.filter(
            item => ele.source !== item.source && ele.target !== item.target
          );
        });
        newLinks = [...customArr, ...newLinks];
      }
      if (
        numAdd(Math.abs(nodeInfo[0].num), Math.abs(nodeInfo[1].num)) ===
        Math.abs(nodeInfo[2].num).toString()
      ) {
        const customArr = [
          { source: nodeInfo[0].name, target: nodeInfo[2].name, value: nodeInfo[0].num },
          {
            source: nodeInfo[1].name,
            target: nodeInfo[2].name,
            value: nodeInfo[1].num,
            dvDirection: 'top'
          }
        ];
        arr.forEach(ele => {
          returnObj = returnObj.filter(
            item => ele.source !== item.source && ele.target !== item.target
          );
        });
        newLinks = [...customArr, ...newLinks];
      }
    }
  });

  // 2 -> 1
  sourceArr_TO.forEach(arr => {
    // 节点信息
    let nodeInfo = [];
    arr.map(item => {
      nodeInfo.push(...opts1.filter(ele => ele.name === item.source || ele.name === item.target));
    });
    nodeInfo = [...new Set(nodeInfo)].sort(arrayObjectSort('depth'));
    if (nodeInfo[0].num < 0 || nodeInfo[1].num < 0 || nodeInfo[2].num < 0) {
      if (
        numAdd(Math.abs(nodeInfo[1].num), Math.abs(nodeInfo[2].num)) ===
        Math.abs(nodeInfo[0].num).toString()
      ) {
        const customArr = [
          { source: nodeInfo[0].name, target: nodeInfo[2].name, value: nodeInfo[2].num },
          {
            source: nodeInfo[0].name,
            target: nodeInfo[1].name,
            value: nodeInfo[1].num,
            dvDirection: 'bottom'
          }
        ];
        arr.forEach(ele => {
          returnObj = returnObj.filter(
            item => ele.source !== item.source && ele.target !== item.target
          );
        });
        newLinks = [...customArr, ...newLinks];
      }
      if (
        numAdd(Math.abs(nodeInfo[0].num), Math.abs(nodeInfo[2].num)) ===
        Math.abs(nodeInfo[1].num).toString()
      ) {
        const customArr = [
          { source: nodeInfo[1].name, target: nodeInfo[2].name, value: nodeInfo[2].num },
          {
            source: nodeInfo[1].name,
            target: nodeInfo[0].name,
            value: nodeInfo[0].num,
            dvDirection: 'bottom'
          }
        ];
        arr.forEach(ele => {
          returnObj = returnObj.filter(
            item => ele.source !== item.source && ele.target !== item.target
          );
        });
        newLinks = [...customArr, ...newLinks];
      }
    }
  });

  // 2 -> 2
  sourceArr_TT.forEach(arr => {
    // 节点信息
    let nodeInfo = [];
    arr.map(item => {
      nodeInfo.push(...opts1.filter(ele => ele.name === item.source || ele.name === item.target));
    });
    nodeInfo = [...new Set(nodeInfo)].sort(arrayObjectSort('depth'));
    // A,C,D,B
    // 0 1 2 3
    if (nodeInfo[0].num < 0 || nodeInfo[1].num < 0 || nodeInfo[2].num < 0 || nodeInfo[3].num < 0) {
      if (
        numAdd(Math.abs(nodeInfo[0].num), Math.abs(nodeInfo[3].num)) ===
        numAdd(Math.abs(nodeInfo[1].num), Math.abs(nodeInfo[2].num))
      ) {
        if (
          Math.abs(nodeInfo[1].num) < Math.abs(nodeInfo[0].num) &&
          Math.abs(nodeInfo[3].num) < Math.abs(nodeInfo[2].num)
        ) {
          const customArr = [
            {
              source: nodeInfo[0].name,
              target: nodeInfo[1].name,
              value: nodeInfo[1].num,
              dvDirection: 'bottom'
            },
            {
              source: nodeInfo[2].name,
              target: nodeInfo[3].name,
              value: nodeInfo[3].num,
              dvDirection: 'top'
            },
            {
              source: nodeInfo[0].name,
              target: nodeInfo[2].name,
              value: numSub(Math.abs(nodeInfo[0].num), Math.abs(nodeInfo[1].num))
            }
          ];
          arr.forEach(ele => {
            returnObj = returnObj.filter(
              item => ele.source !== item.source && ele.target !== item.target
            );
          });
          newLinks = [...customArr, ...newLinks];
        } else if (
          Math.abs(nodeInfo[1].num) > Math.abs(nodeInfo[0].num) &&
          Math.abs(nodeInfo[3].num) > Math.abs(nodeInfo[2].num)
        ) {
          const customArr = [
            {
              source: nodeInfo[1].name,
              target: nodeInfo[0].name,
              value: nodeInfo[0].num,
              dvDirection: 'bottom'
            },
            {
              source: nodeInfo[2].name,
              target: nodeInfo[3].name,
              value: nodeInfo[2].num,
              dvDirection: 'top'
            },
            {
              source: nodeInfo[1].name,
              target: nodeInfo[3].name,
              value: numSub(Math.abs(nodeInfo[1].num), Math.abs(nodeInfo[0].num))
            }
          ];
          arr.forEach(ele => {
            returnObj = returnObj.filter(
              item => ele.source !== item.source && ele.target !== item.target
            );
          });
          newLinks = [...customArr, ...newLinks];
        }
      }
      if (
        numAdd(Math.abs(nodeInfo[0].num), Math.abs(nodeInfo[2].num)) ===
        numAdd(Math.abs(nodeInfo[1].num), Math.abs(nodeInfo[3].num))
      ) {
        if (
          Math.abs(nodeInfo[1].num) > Math.abs(nodeInfo[0].num) &&
          Math.abs(nodeInfo[3].num) < Math.abs(nodeInfo[2].num)
        ) {
          const customArr = [
            {
              source: nodeInfo[1].name,
              target: nodeInfo[0].name,
              value: nodeInfo[0].num,
              dvDirection: 'bottom'
            },
            {
              source: nodeInfo[1].name,
              target: nodeInfo[2].name,
              value: numSub(Math.abs(nodeInfo[1].num), Math.abs(nodeInfo[0].num))
            },
            {
              source: nodeInfo[2].name,
              target: nodeInfo[3].name,
              value: nodeInfo[3].num,
              dvDirection: 'top'
            }
          ];
          arr.forEach(ele => {
            returnObj = returnObj.filter(
              item => ele.source !== item.source && ele.target !== item.target
            );
          });
          newLinks = [...customArr, ...newLinks];
        } else if (
          Math.abs(nodeInfo[1].num) < Math.abs(nodeInfo[0].num) &&
          Math.abs(nodeInfo[3].num) > Math.abs(nodeInfo[2].num)
        ) {
          const customArr = [
            {
              source: nodeInfo[0].name,
              target: nodeInfo[1].name,
              value: nodeInfo[1].num,
              dvDirection: 'bottom'
            },
            {
              source: nodeInfo[2].name,
              target: nodeInfo[3].name,
              value: nodeInfo[2].num,
              dvDirection: 'top'
            },
            {
              source: nodeInfo[0].name,
              target: nodeInfo[3].name,
              value: numSub(Math.abs(nodeInfo[0].num), Math.abs(nodeInfo[1].num))
            }
          ];
          arr.forEach(ele => {
            returnObj = returnObj.filter(
              item => ele.source !== item.source && ele.target !== item.target
            );
          });
          newLinks = [...customArr, ...newLinks];
        }
      }
      if (
        numAdd(Math.abs(nodeInfo[0].num), Math.abs(nodeInfo[1].num)) ===
        numAdd(Math.abs(nodeInfo[2].num), Math.abs(nodeInfo[3].num))
      ) {
        if (
          Math.abs(nodeInfo[2].num) > Math.abs(nodeInfo[0].num) &&
          Math.abs(nodeInfo[3].num) < Math.abs(nodeInfo[1].num)
        ) {
          const customArr = [
            {
              source: nodeInfo[0].name,
              target: nodeInfo[2].name,
              value: nodeInfo[0].num
            },
            {
              source: nodeInfo[1].name,
              target: nodeInfo[2].name,
              value: numSub(Math.abs(nodeInfo[1].num), Math.abs(nodeInfo[3].num))
            },
            {
              source: nodeInfo[1].name,
              target: nodeInfo[3].name,
              value: nodeInfo[3].num
            }
          ];
          arr.forEach(ele => {
            returnObj = returnObj.filter(
              item => ele.source !== item.source && ele.target !== item.target
            );
          });
          newLinks = [...customArr, ...newLinks];
        } else if (
          Math.abs(nodeInfo[2].num) < Math.abs(nodeInfo[0].num) &&
          Math.abs(nodeInfo[3].num) > Math.abs(nodeInfo[1].num)
        ) {
          const customArr = [
            {
              source: nodeInfo[0].name,
              target: nodeInfo[2].name,
              value: nodeInfo[2].num
            },
            {
              source: nodeInfo[1].name,
              target: nodeInfo[3].name,
              value: nodeInfo[1].num
            },
            {
              source: nodeInfo[0].name,
              target: nodeInfo[3].name,
              value: numSub(Math.abs(nodeInfo[0].num), Math.abs(nodeInfo[2].num))
            }
          ];
          arr.forEach(ele => {
            returnObj = returnObj.filter(
              item => ele.source !== item.source && ele.target !== item.target
            );
          });
          newLinks = [...customArr, ...newLinks];
        }
      }
      if (
        numAdd(Math.abs(nodeInfo[1].num), Math.abs(nodeInfo[3].num)) ===
        numSub(Math.abs(nodeInfo[0].num), Math.abs(nodeInfo[2].num))
      ) {
        const customArr = [
          { source: nodeInfo[0].name, target: nodeInfo[2].name, value: nodeInfo[2].num },
          { source: nodeInfo[0].name, target: nodeInfo[3].name, value: nodeInfo[3].num },
          {
            source: nodeInfo[0].name,
            target: nodeInfo[1].name,
            value: nodeInfo[1].num,
            dvDirection: 'bottom'
          }
        ];
        arr.forEach(ele => {
          returnObj = returnObj.filter(
            item => ele.source !== item.source && ele.target !== item.target
          );
        });
        newLinks = [...customArr, ...newLinks];
      }
      if (
        numAdd(Math.abs(nodeInfo[0].num), Math.abs(nodeInfo[1].num)) ===
        numSub(Math.abs(nodeInfo[3].num), Math.abs(nodeInfo[2].num))
      ) {
        const customArr = [
          { source: nodeInfo[0].name, target: nodeInfo[3].name, value: nodeInfo[0].num },
          { source: nodeInfo[1].name, target: nodeInfo[3].name, value: nodeInfo[1].num },
          {
            source: nodeInfo[2].name,
            target: nodeInfo[3].name,
            value: nodeInfo[2].num,
            dvDirection: 'top'
          }
        ];
        arr.forEach(ele => {
          returnObj = returnObj.filter(
            item => ele.source !== item.source && ele.target !== item.target
          );
        });
        newLinks = [...customArr, ...newLinks];
      }
      if (
        numAdd(Math.abs(nodeInfo[0].num), Math.abs(nodeInfo[3].num)) ===
        numSub(Math.abs(nodeInfo[1].num), Math.abs(nodeInfo[2].num))
      ) {
        const customArr = [
          { source: nodeInfo[1].name, target: nodeInfo[2].name, value: nodeInfo[2].num },
          { source: nodeInfo[1].name, target: nodeInfo[3].name, value: nodeInfo[3].num },
          {
            source: nodeInfo[1].name,
            target: nodeInfo[0].name,
            value: nodeInfo[0].num,
            dvDirection: 'bottom'
          }
        ];
        arr.forEach(ele => {
          returnObj = returnObj.filter(
            item => ele.source !== item.source && ele.target !== item.target
          );
        });
        newLinks = [...customArr, ...newLinks];
      }
      if (
        numAdd(Math.abs(nodeInfo[0].num), Math.abs(nodeInfo[3].num)) ===
        numSub(Math.abs(nodeInfo[2].num), Math.abs(nodeInfo[1].num))
      ) {
        const customArr = [
          { source: nodeInfo[0].name, target: nodeInfo[2].name, value: nodeInfo[0].num },
          { source: nodeInfo[1].name, target: nodeInfo[2].name, value: nodeInfo[1].num },
          {
            source: nodeInfo[3].name,
            target: nodeInfo[2].name,
            value: nodeInfo[3].num,
            dvDirection: 'top'
          }
        ];
        arr.forEach(ele => {
          returnObj = returnObj.filter(
            item => ele.source !== item.source && ele.target !== item.target
          );
        });
        newLinks = [...customArr, ...newLinks];
      }
    }
  });
  newLinks = unique(newLinks);
  returnObj = [...returnObj, ...newLinks];
  return returnObj;
}