d3实现折叠式组织结构图效果代码-html代码-BFW代码库

代码语言：html
所属分类：图表
代码描述：d3实现折叠式组织结构图效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
  
<style>
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1px;
}


.sliderZoom input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 6px 0;
}
.sliderZoom input[type=range]:focus {
  outline: none;
}
.sliderZoom input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
.sliderZoom input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 0.2px solid #000000;
  height: 15px;
  width: 6px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6.2px;
}
.sliderZoom input[type=range]:focus::-webkit-slider-runnable-track {
  background: #629fd2;
}
.sliderZoom input[type=range]::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
.sliderZoom input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 0.2px solid #000000;
  height: 15px;
  width: 6px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
.sliderZoom input[type=range]::-ms-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.sliderZoom input[type=range]::-ms-fill-lower {
  background: #1c4162;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
.sliderZoom input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
.sliderZoom input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 0.2px solid #000000;
  height: 15px;
  width: 6px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  height: 3px;
}
.sliderZoom input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
.sliderZoom input[type=range]:focus::-ms-fill-upper {
  background: #629fd2;
}

.sliderZoom{
  width:20%;
  float:right;
  z-index: 1000;
  transition:opacity 0.3s ease;
  opacity:.3;
}
.sliderZoom:hover{
  opacity:1;
}

rect.rectangulo-hijos.hover{
  transform: rotate(6deg);
}
rect.rectangulo-hijos{
  transform: rotate(2deg);
  transition: transform .3s ease;
}
rect.rectangulo-hijos2.hover{
  transform: rotate(-6deg);
}
rect.rectangulo-hijos2{
  transform: rotate(-2deg);
  transition: transform .3s ease;
}

rect.rectangulo-texto.hover{
  fill:#f7f7f7;
}

.activo rect.barra-enlaces {
  fill:#6F9FBB;
}
.cuadro-nodo-enlaces {
  display: block;
  width: 10vw;
  max-height: 15px;
  max-width: 150px;
}

.enlaces-nodo{
  min-width: 100px;

  display: block;
  height: auto;
  position: relative;
  text-align: center;

  font-size: 11px;
  background-color: white;
  border: 1px solid lightgrey;
  border-radius: 4px;
  opacity: 1;  
}
.cuadro-nodo-enlaces a{
  opacity: 1;
  margin:0 3px;  
  color:0.8;
 }


.cuadro-nodo-texto {
  position: fixed;
  width: 10vw;
  max-width: 150px;
  display: block;
  transform: translate(-50%, 0);
}

.texto-nodo {

  min-width: 100px;

  display: block;
  height: auto;
  position: relative;
  text-align: center;

  font-size: 11px;
  background-color: white;
  border: 1px solid lightgrey;
  border-radius: 4px;
  opacity: 1;
}
.cuadro-nodo-texto .fa-info-circle {
  position: absolute;
  top:-7px;
  left:48%;
  color:#bbb;
  z-index:100000;
  cursor: pointer;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
    border:1px dotted #eee;
}

/* Generic styling */
</style>




</head>

<body  >
  <div class="sliderZoom"></div>
<figure class="org-chart cf">
</figure>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.v3.js"></script>
      <script >
function getParameterByName(name) {
  name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
  var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
  return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

function generarImagen() {
  var html = d3.select("svg")
    .attr("title", "test")
    .attr("version", 1.1)
    .attr("xmlns", "http://www.w3.org/2000/svg")
    .node().parentNode.innerHTML;
  $(".preview").html("<img src=data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(html))) + ">");
  /*    d3.select(".centro").append("div")
            .attr("id", "download")
            .html("Right-click on this preview and choose Save as<br />Left-Click to dismiss<br />")
            .append("img")
            .attr("src", "data:image/svg+xml;base64,"+ btoa(unescape(encodeURIComponent(html))));
  */
}

function mouseover(d) {
  d3.select(this).select("rect.rectangulo-hijos2").classed("hover", true);
  d3.select(this).select("rect.rectangulo-hijos").classed("hover", true);
  d3.select(this).select("rect.rectangulo-texto").classed("hover", true);

  /* d3.select(this).append("text")
       .attr("class", "hover")
       .attr('transform', function(d){ 
           return 'translate(5, -10)';
       })
       .text(d.name + ": " + d.id);*/
}

// Toggle children on click.
function mouseout(d) {
  //d3.select(this).select("text.hover").remove();
  d3.select(this).select("rect.rectangulo-hijos2").classed("hover", false);
  d3.select(this).select("rect.rectangulo-hijos").classed("hover", false);
  d3.select(this).select("rect.rectangulo-texto").classed("hover", false);
}

function collapse(d) {
  if (d.children) {
    d._children = d.children;
    d._children.forEach(collapse);
    d.children = null;
  }
}

function toggleAll(d) {
  if (d.children) {
    d.children.forEach(toggleAll);
    toggle(d);
  }
}

function actualizarEventos() {
  $(".node a").on("click", function(e) {
    window.location = $(this).attr('href');
    //e.preventDefault();
    e.stopPropagation();
    //console.log("enlace");
  });

  /*        $(".node .texto .cuadro-nodo-texto i.fa.fa-info-circle").unbind("click").on("click", function(e){
            var cuadroEnlaces=$(this).closest("g").parent().find(".cuadro-nodo-enlaces");
            
            if(cuadroEnlaces.is(':visible')){
              cuadroEnlaces.hide()  
            }else{
              cuadroEnlaces.show()  
            }
            
             //e.preventDefault();
             e.stopPropagation();
             //console.log("enlace");
          });*/
}

function getDepth(obj) {
  var depth = 0;
  if (obj.children) {
    obj.children.forEach(function(d) {
      var tmpDepth = getDepth(d)
      if (tmpDepth > depth) {
        depth = tmpDepth
      }
    })
  }
  return 1 + depth
}

function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
      words = text.text().split(/\s+/).reverse(),
      word,
      line = [],
      lineNumber = 0,
      lineHeight = 1.2, // ems
      x = text.attr("x"),
      y = text.attr("y"),
      dy = text.attr("dy") ? text.attr("dy") : 0;

    tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      var centradox = x + (width - tspan.node().getComputedTextLength()) / 2;

      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });
}

var _queryTreeSort = function(options) {
  var cfi, e, i, id, o, pid, rfi, ri, thisid, _i, _j, _len, _len1, _ref, _ref1;
  id = options.id || "id";
  pid = options.parentid || "parentid";
  ri = [];
  rfi = {};
  cfi = {};
  o = [];
  _ref = options.q;
  for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
    e = _ref[i];
    rfi[e[id]] = i;
    if (cfi[e[pid]] == null) {
      cfi[e[pid]] = [];
    }
    cfi[e[pid]].push(options.q[i][id]);
  }
  _ref1 = options.q;
  for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
    e = _ref1[_j];
    if (rfi[e[pid]] == null) {
      ri.push(e[id]);
    }
  }
  while (ri.length) {
    thisid = ri.splice(0, 1);
    o.push(options.q[rfi[thisid]]);
    if (cfi[thi.........完整代码请登录后点击上方下载按钮下载查看