这个是一种脑图或者说树图的展示，从实现来说，其实也没有想象中那么麻烦按一定规则排列出最高总高度（合适的间隔），并合理的分布排列（上下分布均匀）组件按一定规则根据层级（合适的间隔）得出总的宽度，并合理分布排列各组件在1、2确定情况下，进行连线计算，因为需要连接的对象位置已经确定，所以连续规则的确定也很明确即从需连接对象（框）的上下中点（x1，y1）和（x2，y2）向二者中间水平引线到二者水平位置中点即线段(x1,y1)((x1+x2)/2,y1) 与 (x2,y2)( (x1+x2)/2,y2),然后连接画出线段((x1+x2)/2,y1)( (x1+x2)/2,y2)即可。因为这里每个框的位置很确定，所以这里（x1，y1）和（x2，y2）在完成1和2步后就是确定的，则每个线段也是确定的。

这个效果怎么实现呢？

yuoooo

发布于
2020-12-07

新手上路，请多包涵

javascript 前端 vue.js css html

阅读 2.2k

4 个回答

得票最新

xdsnet

7.6k3527

发布于
2020-12-08

✓ 已被采纳

这个是一种脑图或者说树图的展示，从实现来说，其实也没有想象中那么麻烦

按一定规则排列出最高总高度（合适的间隔），并合理的分布排列（上下分布均匀）组件
按一定规则根据层级（合适的间隔）得出总的宽度，并合理分布排列各组件
在1、2确定情况下，进行连线计算，因为需要连接的对象位置已经确定，所以连续规则的确定也很明确即从需连接对象（框）的上下中点（x1，y1）和（x2，y2）向二者中间水平引线到二者水平位置中点即线段(x1,y1)((x1+x2)/2,y1) 与 (x2,y2)( (x1+x2)/2,y2),然后连接画出线段((x1+x2)/2,y1)( (x1+x2)/2,y2)即可。因为这里每个框的位置很确定，所以这里（x1，y1）和（x2，y2）在完成1和2步后就是确定的，则每个线段也是确定的。