d3实现组织结构架构图代码-html代码-BFW代码库

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.fontColors = option.fontColors;
  this.bgColors = option.bgColors;
  this.dataUrl = option.dataUrl;
  this._getFontSize = function () {
    return _fontSize;
  };

}

Tree.prototype.init = function () {
  var that = this;
  var tree = d3.layout.tree().
  size([that.width, that.height - that.offsetTreeH]).
  separation(function (a, b) {//间隔函数
    return (a.parent == b.parent ? 1 : 2) / a.depth;
  });

  var svg = d3.select(that.selector).append("svg").
  attr("width", that.width).
  attr("height", that.height).
  append("g").
  attr("transform", "translate(0,0)");


  if (Object.prototype.toString.call(that.dataUrl).toLowerCase() == '[object string]') {
    d3.json(that.dataUrl, function (error, root) {
      if (error) throw error;
      render(root);
    });
  } else {
    render(that.dataUrl);
  }

  function render(root) {
    var nodes = tree.nodes(root);
    var links = tree.links(nodes);
    var link = svg.selectAll(".link").
    data(links).
    enter().
    append("path").
    attr("class", "link").
    attr("d", function (d) {
      var lineOffsetWidth;

      if (that.nodeWidth == null) {//nodeWidth传参为null则按照字数来自动设置宽度
        lineOffsetWidth = (d.source.name.length + d.source.number.length + 2) *
        that._getFontSize() * that.fontNum;
      } else {
        lineOffsetWidth = that.nodeWidth['_' + d.source.depth];
      }

      lineOffsetWidth = lineOffsetWidth + 10;

      return "M" + d.source.y + " " + d.source.x +
      "L" + (d.source.y + lineOffsetWidth) + " " + d.source.x +
      " L" + (d.source.y + lineOffsetWidth) + " " + d.target.x + " L" +
      d.target.y + " " + d.target.x;
    }).
    attr("style", function () {
      return "stroke:#F7881F;fill: none;stroke-width: 1.5px;";
    });

    var node = svg.selectAll(".node").
    data(nodes).
    enter().
    append("g").
    attr("class", "node").
    attr("transform", function (d) {
      return "translate(" + d.y + "," + (d.x - that.nodeHeight / 2) + ")";
    }).
    attr("style", function (d) {
      return "font: " + that._getFontSize() * that.fontNum + "px sans-serif;";
    });

    node.append("rect").
    attr("width", function (d) {
      return that.nodeWidth == null ?
      (d.name.length + d.number.length + 2) * that._getFontSize() * that.fontNum :
      that.nodeWidth['_' + d.depth];
    }).
    attr("height", that.nodeHeight).
    attr("x", 0).
    attr("y", 0).
    attr("style", function (d) {
      if (d.type === "1") {
        return "fill:" + that.bgColors.normal;
      } else if (d..........完整代码请登录后点击上方下载按钮下载查看