d3.js实现树形结构过渡展开、折叠

d3相关api

本文为一个最简单的树形结构过渡效果展开的核心功能，没有添加连接线等逻辑

hierarchy

family = d3.hierarchy({name: "root",children: [{name: "child #1"},{name: "child #2",children: [{name: "grandchild #1"},{name: "grandchild #2"},{name: "grandchild #3"}]}]
}) 

hierarchy接收一个树形结构的对象，d3会根据这个树形结构生成一个新的树形结构，这个新的树形结构中有几个主要的属性

• data: 原始树形结构对应位置的数据
• parent：父级节点的引用
• depth：当前节点的层级，根节点为0
• height：当前节点到当前路径叶子节点的节点数，叶子节点的height为0

 const family = hierarchy({name: "root",parents: [{ name: "parent #1" },{name: "parent #2",children: [{ name: "grandparent#1" },{ name: "grandparent#2" },{ name: "grandparent#3" },],},],},(d) => {return d.parents;}); 

d3.tree()

根据配置给树形结构添加坐标

tree.nodeSize() 参数为一个数组，分别是每个节点的水平距离和垂直距离

transition

 selection.transition().duration(毫秒过渡时间) 

为当前selection节点设置属性时添加过渡效果

开始绘制

定义一个插件类DrawGraphPlugin，参数为数据data和el挂载目标对象

class DrawGraphPlugin {constructor(config) {this.el = config.el;this.daddta = config.data;}
}