基于D3(V5版)的树形结构数据（有向无环）的自动布局实践

树形数据

let treeData = {
    id:1,
    name:'数据1'，
    children:[
        {
            id:2,
            name:'数据2'，
        }
        ...
    ]
}

初始化树

const w = 100 // 横向宽度
const h = 100 // 纵向高度

/**
*初始化树形结构布局的参数，nodeSize是你的每个节点占用的空间大小。
*separation 来根据 是否为同一父节点下的子节点来决定两个统一之间的间隔空间。
*/
let tree = d3.tree().nodeSize(w,h).separation((a,b) =>{return a.parent === b.parent ? 1:2})

// 获取带有自动生成的x,y坐标属性的数据
let hierarchyData = tree(d3.hierarchy(treeData))

//拍平数据，这个可以得到一个被拍平的数组,相当于树形结构扁平化了。这样的数据方便循环。
let data = hierarchyData.descendants()

结语

还是要多看D3的官方文档d3-hierarchy章节，www.d3js.org.cn/document/d3…