要做一个树形结构图,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来设置要展开的几层节点。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。