d3实现组织结构架构图代码
代码语言:html
所属分类:图表
代码描述:d3实现组织结构架构图代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> </head> <body > <div id="dynamicTree"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.3.5.5.js"></script> <script > function Tree(option) { var _fontSize = 10; var defaultOpt = { width: 900, height: 900, offsetTreeH: 200, //影响树形横向的区域 nodeHeight: 20, //节点rect高度 nodeWidth: { //传参为null就按字数设置宽度 _0: 160, _1: 160, _2: 130, _3: 110, _4: 160 }, //默认节点宽度 selector: null, //挂载元素 fontNum: 1.2, //设置字体大小因子 fontColors: { //字体颜色 normal: '#fff', warning: '#e3e3e1', errors: '#f00' }, bgColors: { normal: '#35ad5b', warning: '#e3e3e1', errors: '#f00' }, dataUrl: '' //必填 }; option = $.extend(true, defaultOpt, option); this.width = option.width; this.height = option.height; this.nodeHeight = option.nodeHeight; this.nodeWidth = option.nodeWidth; this.offsetTreeH = option.offsetTreeH; this.selector = option.selector == null ? "body" : option.selector; this.fontNum = option.fontNum; this.fon.........完整代码请登录后点击上方下载按钮下载查看
网友评论0