用js如何绘制类似组织架构图之类的图形?刚开始想了想,感觉还挺复杂,如果用svg或者canvas绘制的话,越到下面元素越多,就需要对上层的元素位置重新计算,在网上看到类似的实现方式,觉得挺不错,特此拿来分享一下,先看看效果:

主要思路

这个简单的组织架构图主要利用的就是嵌套table做的,虽然现在很多布局已经不用table做了,但是不可否认,table在有些时候确实很有用。因为table伸缩性很好,如果下面内容比较大,上面会自动撑开,而这个正是我们需要的。

要形成这种树形结构,那么我们的数据结构肯定也是树形的,先来看看我们数据的结构:

context表示自己节点上的内容,children表示孩子节点,然后children里面还有其他的孩子等,构成一个树形结构。

绘制单个节点的时候,我们固定将一个table按照按照四行去绘制,具体如下:

background Layer 1 第一个tr,有一个td, colspan=2*2 第二个tr,有一个td, colspan=2*2 td内容为 <div class='line down'></div> 第三个tr,有2*2个td, 分别为: <td class="line left">&nbsp;</td> <td class="line right top">&nbsp;</td> <td class="line left top">&nbsp;</td> <td class="line right">&nbsp;</td> 交替绘制 绘制最左边 绘制最右边 第四个tr,有2个td,每个td的colspan=2 每个td里面装的是它的孩子渲染的table

假如一个节点有n个孩子,那么第一行和第二行会占2*n个格子,第三行有2*n个td,第四行有n个td,每个td占两个格子。其中第四行的td中装的是孩子所渲染的表格,这样就将整个树递归渲染起来了。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字