用最简单的方式画拓扑图！！！类似于拓扑图的配置，原来是使用go.js实现的，类似的库还有antvg6。重构主要是为了提

可以看到，包里只提供了极少的api，文档几分钟就能看完，之所以少，是因为库只负责将节点放到正确的位置，连上线就好了，其他的“概不负责”，修改样式可以在你的div上加个class，添加事件就再上个onXXX，想做啥做啥。

最主要的原因就是为了“简单”！对于拓扑图这样的场景，画一个简单的节点，用DOM实现只需要简单的几行代码，用canvas的话就要写一大堆了，别人来看估计就是“一大坨”了。同时相对于需要先学习一套组件，然后用那些“奇奇怪怪”的api去写交互和样式，直接上手就开始撸自己最熟悉的div+css岂不是很开心？对于开发而言，调试DOM能够看到每一个元素的细节，而canvas就无能为力了。

核心部分代码：

lines记录节点与节点间的关系，start记录起点信息，格式为：'起点id-锚点id'，end记录终点信息，格式为：'终点id'。

上面的效果图可以看到右下角第二个图标点击自动布局功能，为了方便排版，自动布局会根据树结构计算节点的位置。当初始数据没有position字段时，如果autoLayout为true，组件会自动触发布局功能，相当于点击了自动布局按钮。

组件使用类似input或者select，当有新增节点或者连线发生时，触发onChange,onChange带有两个参数，newData和changeType,整个过程完全受控，你可以在onChange中做一些校验，决定数据是否更新。

当选择节点或者线段时触发，参数selectData格式同data。

renderTreeNode接收两个参数：nodeData,decorators，返回节点的DOM。

exportdefaulttopologyWrapper(Flow);包含拖拽部分的最上层组件必须要用topologyWrapper包一下，这是因为使用了react-dnd需要设置backend，这里只是做了一个简单的导出，方便使用:

exportconsttopologyWrapper=DragDropContext(HTML5BackEnd);总结从需求出发来看，需要拥有更好的定制化能力和灵活性，从重构的角度来看，需要让代码更简单明了。go.js功能十分强大，但对于拓扑图这种相对较简单的场景而言，并不需要那么多复杂的能力，反而可能出现上面说的问题，所有canvas的实现应该都会有类似的问题。所以充分利用DOM的能力，在能实现需求的情况下，本库或许是更好的选择。