d3实现组织结构架构图代码

代码语言:html

所属分类:图表

代码描述:d3实现组织结构架构图代码

代码标签: 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&.........完整代码请登录后点击上方下载按钮下载查看

网友评论0