要做一个树形结构图,d3js的配置项很多,发现AntV的g6很不错,是啊里团队开发的

首次加载时,默认开展两层,如果数据量大,后续能够点击树节点获取子节点数据再渲染下来。

// 传入数据      graph.data(dataSet)      // 渲染      graph.render()      // 自适应      graph.fitView()      // 1 默认开展两层节点,之后,从新渲染      G6.Util.traverseTree(dataSet, function (item) {        if (item.depth > 0) {          //collapsed为true时默认收起          item.collapsed = true        }      })      // 传入数据      graph.data(dataSet)      // 渲染      graph.render()      // 自适应      graph.fitView()      // 定位到画布核心      graph.fitCenter()

为什么要渲染两次?
因为一开始没有渲染的时候,item.depth的属性不存在,不能拿来做判断。能够依据item.depth来设置要开展的几层节点。