【JS】SVG画树形图计算树形节点位置

let ref = {w:200,h:80,w_gap:40,h_gap:20}
/**
 * 先定本身的top/ left,再定子节点的top/ left,以及参与计算的个数,然后再定兄弟的top/ left
 * deltaCnt 为计算高度的 子节点个数
 *node 为节点数据,ref 为每个节点的基本信息:宽高间距
 * */
function toSetXy(node, ref){
    let children = node.children || [];
    let childCnt = children.length
    let deltaCnt = 0  
    for(let i=0; i<childCnt;i++){
        let child = children[i];
        child._top =  node._top + (deltaCnt ) * ( ref.h + ref.h_gap)  
        child._left = node._left + ref.w + ref.w_gap
        toSetXy(child,ref)
        deltaCnt += child._deltaCnt +1
    }
    node._deltaCnt =  deltaCnt ==0 ? 0:deltaCnt -1// 当没有子节点时,则为0,有子节点时,则为子节点个数-1
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。