HTML绘制拓扑简图,用最简单的方式画拓扑图！！！

前言

前段时间重构了下面这样一个页面(产品页面不方便截图)：

类似于拓扑图的配置，原来是使用go.js实现的，类似的库还有antv g6。重构主要是为了提高代码质量，降低维护成本，产品上需要更强的定制化能力(对付产品经理的变态需求)，所以经过一番研究之后，最后决定放弃使用现成的库。原因如下：

维护成本高：类似的库(antv/g6, go.js)都是基于canvas实现,也都大同小异的定义了一套组件，有一定的学习成本，同时基于这样的库写出来的代码都相对复杂；

灵活性差：因为是canvas实现，元素一般需要指定尺寸，所以在一些需要元素大小自适应的地方并没有DOM元素好实现；

定制化能力差。只能使用库里定义的api和事件，遇到一些比较极端的需求时无能为力。

当然，以上两个库还是相当强大的，不过基于这些原因，自己基于(DOM + SVG)撸一个拓扑图配置的工具库topology-byfe

demo演示

源代码

import React from 'react';

import { Topology, topologyWrapper, TemplateWrapper } from 'topology-byfe';

import { ITopologyNode, ITopologyData, IWrapperOptions } from 'topology-byfe/lib/declare';

import './index.less';

interface FlowState {

data: ITopologyData;

}

class Flow extends React.Component {

state: FlowState = {

data: { lines: [], nodes: [] },

};

generatorNodeData = (isBig: boolean) => ({

id: `${Date.now()}`,

name: isBig ? '宽节点