html 层级展开 tree,利用HTML5实现层级关系架构图代码

特效描述：利用HTML5实现 层级关系架 构图代码。利用HTML5实现层级关系架构图代码

代码结构

1. 引入JS

2. HTML代码

var json = [

{

"name": "张三",

"parent": "null",

"children": [

{

"name": "李四",

"parent": "张三",

"children": [

{

"name": "王五",

"parent": "李四",

"children": [

{"name": "程六","parent": "王五" },

{"name": "王八","parent": "王五" },

{"name": "王七","parent": "王五" },

{

"name": "王九",

"parent": "王五",

"children":[

{"name": "王十","parent": "王五" },

{"name": "王十一","parent": "王五" },

{"name": "王十二","parent": "王五" },

{"name": "王十三","parent": "王五" },

{"name": "王十四","parent": "王五" },

{

"name": "程五",

"parent": "王五",

"children":[

{"name": "程六","parent": "程五" },

{"name": "程七","parent": "程五" },

{"name": "程八","parent": "程五" },

{"name": "小张","parent": "小红" },

{"name": "小王","parent": "小红" },

{"name": "小程","parent": "小红" },

{"name": "小陈","parent": "小红" },

{"name": "小明","parent": "小红" },

{"name": "小张","parent": "小红" },

{"name": "小王","parent": "小红" },

{"name": "小程","parent": "小红" },

{"name": "小陈","parent": "小红" },

{"name": "小明","parent": "小红" },

{"name": "小张","parent": "小红" },

{"name": "小王","parent": "小红" },

{"name": "小程","parent": "小红" },

{"name": "小陈","parent": "小红" },

{"name": "小明","parent": "小红" },

{"name": "小张","parent": "小红" },

{"name": "小王","parent": "小红" },

{"name": "小程","parent": "小红" },

{"name": "小陈","parent": "小红" },

{"name": "程九","parent": "程五" },

{

"name": "程十",

"parent": "程五",

&#