d3实现折叠式组织结构图效果代码
代码语言: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[thisid] != null) { ri = cfi[thisid].concat(ri); } } return o; }; var _makeTree = function(options) { var children, e, id, o, pid, temp, _i, _len, _ref; id = options.id || "id"; pid = options.parentid || "parentid"; children = options.children || "children"; temp = {}; o = []; _ref = options.q; for (_i = 0, _len = _ref.length; _i < _len; _i++) { e = _ref[_i]; e[children] = []; temp[e[id]] = e; if (temp[e[pid]] != null) { temp[e[pid]][children].push(e); } else { o.push(e); } } return o; }; var _renderTree = function(tree) { var e, html, _i, _len; html = "<ul class='sections'>"; for (_i = 0, _len = tree.length; _i < _len; _i++) { e = tree[_i]; html += "<li class='department'><a href=''><span>" + e.name + "</span></a>"; if (e.children != null) { html += _renderTree(e.children); } html += "</li>"; } html += "</ul>"; return html; }; $(document).ready(function() { var id_padre = getParameterByName('organigrama_id_padre'); if (id_padre == '') { id_padre = 1; } var orgJSON = [{"id": "1", "parentid": "20", "name": "Presidencia", "path" :""},{"id": "4803", "parentid": "1", "name": "Asesoría e Asistencia Xurídica", "path" :"100,20,1"},{"id": "13477", "parentid": "1", "name": "Área de Acción Territorial", "path" :"100,20,1"},{"id": "3924", "parentid": "1", "name": "Representación Sindical", "path" :"100,20,1"},{"id": "4221", "parentid": "1", "name": "Grupos Políticos", "path" :"100,20,1"},{"id": "14177", "parentid": "1", "name": "Área de Servizos Provinciais", "path" :"100,20,1"},{"id": "14184", "parentid": "1", "name": "Área de Desenvolvemento Económico, Turismo e Medio Ambiente", "path" :"100,20,1"},{"id": "136", "parentid": "1", "name": "Intervención Xeral e Xestión Económico-Financeira", "path" :"100,20,1"},{"id": "6200", "parentid": "1", "name": "Gabinete de Presidencia", "path" :"100,20,1"},{"id": "609", "parentid": "1", "name": "Secretaría Xeral", "path" :"100,20,1"},{"id": "688", "parentid": "1", "name": "Tesourería e Xestión de Tributos", "path" :"100,20,1"},{"id": "12961", "parentid": "1", "name": "Área de Persoal e Organización", "path" :"100,20,1"},{"id": "14175", "parentid": "12961", "name": "Servizo de Organización", "path" :"100,20,1,12961"},{"id": "13420", "parentid": "12961", "name": "Servizo de Sistemas e Soporte", "path" :"100,20,1,12961"},{"id": "13424", "parentid": "12961", "name": "Servizo de Informática e Administración Electrónica", "path" :"100,20,1,12961"},{"id": "165", "parentid": "12961", "name": "Servizo de Planificación e Xestión de Recursos Humanos", "path" :"100,20,1,12961"},{"id": "13421", "parentid": "13420", "name": "Sección de Soporte e Atención a Usuarios", "path" :"100,20,1,12961,13420"},{"id": "13423", "parentid": "13420", "name": "Sección de Sistemas e Infraestruturas", "path" :"100,20,1,12961,13420"},{"id": "13422", "parentid": "13424", "name": "Sección de Administración Electrónica", "path" :"100,20,1,12961,13424"},{"id": "13425", "parentid": "13424", "name": "Sección de Asistencia Informática", "path" :"100,20,1,12961,13424"},{"id": "11", "parentid": "14175", "name": "Sección de Formación", "path" :"100,20,1,12961,14175"},{"id": "13428", "parentid": "14175", "name": "Sección de Organización", "path" :"100,20,1,12961,14175"},{"id": "4498", "parentid": "14175", "name": "Sección da Organización da Prevención de Riscos Laborais", "path" :"100,20,1,12961,14175"},{"id": "6199", "parentid": "165", "name": "Sección de Xestión de Recursos Humanos", "path" :"100,20,1,12961,165"},{"id": "7672", "parentid": "165", "name": "Sección de Planificación de Recursos Humanos", "path" :"100,20,1,12961,165"},{"id": "10233", "parentid": "6199", "name": "Negociado de Seguridade Social I", "path" :"100,20,1,12961,165,6199"},{"id": "10232", "parentid": "6199", "name": "Negociado de Nóminas", "path" :"100,20,1,12961,165,6199"},{"id": "14179", "parentid": "6199", "name": "Negociado de Xestión", "path" :"100,20,1,12961,165,6199"},{"id": "14188", "parentid": "6199", "name": "Negociado de Seguridade Social II", "path" :"100,20,1,12961,165,6199"},{"id": "10231", "parentid": "7672", "name": "Negociado de Planificación I", "path" :"100,20,1,12961,165,7672"},{"id": "14925", "parentid": "7672", "name": "Negociado de Planificación II", "path" :"100,20,1,12961,165,7672"},{"id": "9", "parentid": "13477", "name": "Servizo de Xestión de Plans", "path" :"100,20,1,13477"},{"id": "7674", "parentid": "13477", "name": "Servizo de Vías e Obras", "path" :"100,20,1,13477"},{"id": "166", "parentid": "13477", "name": "Servizo de Arquitectura e Mantemento", "path" :"100,20,1,13477"},{"id": "14202", "parentid": "13477", "name": "Servizo de Apoio Técnico a Municipios", "path" :"100,20,1,13477"},{"id": "149", "parentid": "13477", "name": "Servizo de Asistencia Técnica Urbanística", "path" :"100,20,1,13477"},{"id": "7665", "parentid": "166", "name": "Sección de Arquitectura e Mantemento", "path" :"100,20,1,13477,166"},{"id": "19", "parentid": "9", "name": "Sección de Plans Especiais", "path" :"100,20,1,13477,9"},{"id": "18", "parentid": "9", "name": "Sección de Plans Provinciais", "path" :"100,20,1,13477,9"},{"id": "10238", "parentid": "18", "name": "Negociado de Plans Provinciais", "path" :"100,20,1,13477,9,18"},{"id": "10237", "parentid": "19", "name": "Negociado de Plans Especiais", "path" :"100,20,1,13477,9,19"},{"id": "135", "parentid": "136", "name": "Servizo de Contabilidade", "path" :"100,20,1,136"},{"id": "151", "parentid": "136", "name": "Servizo de Orzamentos, Estudos e Asistencia Económica", "path" :"100,20,1,136"},{"id": "2647", "parentid": "136", "name": "Servizo de Fiscalización e Control Financeiro", "path" :"100,20,1,136"},{"id": "15886", "parentid": "135", "name": "Sección de Contabilidade III", "path" :"100,20,1,136,135"},{"id": "6190", "parentid": "135", "name": "Sección de Contabilidad I", "path" :"100,20,1,136,135"},{"id": "6191", "parentid": "135", "name": "Sección de Contabilidade II", "path" :"100,20,1,136,135"},{"id": "15887", "parentid": "15886", "name": "Negociado VI", "path" :"100,20,1,136,135,15886"},{"id": "14181", "parentid": "6190", "name": "Negociado II", "path" :"100,20,1,136,135,6190"},{"id": "10215", "parentid": "6190", "name": "Negociado I", "path" :"100,20,1,136,135,6190"},{"id": "10213", "parentid": "6191", "name": "Negociado III", "path" :"100,20,1,136,135,6191"},{"id": "10216", "parentid": "6191", "name": "Negociado V", "path" :"100,20,1,136,135,6191"},{"id": "10214", "parentid": "6191", "name": "Negociado IV", "path" :"100,20,1,136,135,6191"},{"id": "2994", "parentid": "151", "name": "Sección I", "path" :"100,20,1,136,151"},{"id": "6201", "parentid": "151", "name": "Sección II", "path" :"100,20,1,136,151"},{"id": "10212", "parentid": "2994", "name": "Negociado I", "path" :"100,20,1,136,151,2994"},{"id": "3846", "parentid": "2647", "name": "Sección de Control I", "path" :"100,20,1,136,2647"},{"id": "3173", "parentid": "2647", "name": "Sección de Control II", "path" :"100,20,1,136,2647"},{"id": "10209", "parentid": "3173", "name": "Negociado de Control de Ingresos", "path" :"100,20,1,136,2647,3173"},{"id": "10211", "parentid": "3173", "name": "Negociado de Control Financeiro e Auditoría de Gastos", "path" :"100,20,1,136,2647,3173"},{"id": "10208", "parentid": "3846", "name": "Negociado de Contratos e Outros Gastos Correntes", "path" :"100,20,1,136,2647,3846"},{"id": "10205", "parentid": "3846", "name": "Negociado de Fiscalización de Subvencións", "path" :"100,20,1,136,2647,3846"},{"id": "10206", "parentid": "3846", "name": "Negociado de Fiscalización de Plans e Outros Gastos con Financiamento Afectado", "path" :"100,20,1,136,2647,3846"},{"id": "10207", "parentid": "3846", "name": "Negociado de Fiscalización de Persoal", "path" :"100,20,1,136,2647,3846"},{"id": "7667", "parentid": "14177", "name": "Servizos Xerais Centro Educativo Calvo Sotelo", "path" :"100,20,1,14177"},{"id": "7666", "parentid": "14177", "name": "Centro Residencial Docente Calvo Sotelo", "path" :"100,20,1,14177"},{"id": "1699", "parentid": "14177", "name": "IES Rafael Puga Ramón", "path" :"100,20,1,14177"},{"id": "6", "parentid": "14177", "name": "Servizo de Acción Social, Cultural e Deportes", "path" :"100,20,1,14177"},{"id": "14146", "parentid": "14177", "name": "Servizo de Patrimonio", "path" :"100,20,1,14177"},{"id": "3314", "parentid": "14177", "name": "Biblioteca", "path" :"100,20,1,14177"},{"id": "3824", "parentid": "14177", "name": "IES Calvo Sotelo", "path" :"100,20,1,14177"},{"id": "5039", "parentid": "14177", "name": "Conservatorio Profesional de Danza", "path" :"100,20,1,14177"},{"id": "6192", "parentid": "14177", "name": "Centro de Día de Menores de Ferrol", "path" :"100,20,1,14177"},{"id": "5402", "parentid": "14177", "name": "Fogar Infantil Emilio Romay", "path" :"100,20,1,14177"},{"id": "6195", "parentid": "14177", "name": "Centro Residencial Cultural Pazo de Mariñán", "path" :"100,20,1,14177"},{"id": "14392", "parentid": "14146", "name": "Negociado", "path" :"100,20,1,14177,14146"},{"id": "15299", "parentid": "14146", "name": "Sección de Patrimonio", "path" :"100,20,1,14177,14146"},{"id": "10242", "parentid": "3314", "name": "Negociado", "path" :"100,20,1,14177,3314"},{"id": "9898", "parentid": "3824", "name": "Departamento de Artes Gráficas", "path" :"100,20,1,14177,3824"},{"id": "9896", "parentid": "3824", "name": "Departamento de Electricidade", "path" :"100,20,1,14177,3824"},{"id": "9894", "parentid": "3824", "name": "Departamento de Formación e Orientación Laboral", "path" :"100,20,1,14177,3824"},{"id": "9893", "parentid": "3824", "name": "Departamento de Orientación", "path" :"100,20,1,14177,3824"},{"id": "9892", "parentid": "3824", "name": "Departamento de Programas de Cualificación Profesional Inicial", "path" :"100,20,1,14177,3824"},{"id": "9897", "parentid": "3824", "name": "Departamento de Madeira", "path" :"100,20,1,14177,3824"},{"id": "11843", "parentid": "3824", "name": "Formación en Centros de Trabajo", "path" :"100,20,1,14177,3824"},{"id": "9895", "parentid": "3824", "name": "Departamento de Fabricación Mecánica", "path" :"100,20,1,14177,3824"},{"id": "602", "parentid": "6", "name": "Sección de Servizos Sociais", "path" :"100,20,1,14177,6"},{"id": "13", "parentid": "6", "name": "Sección de Educación, Cultura e Deportes", "path" :"100,20,1,14177,6"},{"id": "10219", "parentid": "13", "name": "Negociado de Deportes", "path" :"100,20,1,14177,6,13"},{"id": "10218", "parentid": "13", "name": "Negociado de Cultura", "path" :"100,20,1,14177,6,13"},{"id": "10217", "parentid": "602", "name": "Negociado de Servicios Sociais", "path" :"100,20,1,14177,6,602"},{"id": "14185", "parentid": "14184", "name": "Servizo de Promoción Económica, Turismo e Emprego", "path" :"100,20,1,14184"},{"id": "3", "parentid": "14184", "name": "Servizo de Desenvolvemento Territorial e Medio Ambiente", "path" :"100,20,1,14184"},{"id": "14186", "parentid": "14185", "name": "Sección de Promoción e Desenvolvemento Turístico", "path" :"100,20,1,14184,14185"},{"id": "13426", "parentid": "14185", "name": "Sección de Coordinación de Proxectos Técnicos", "path" :"100,20,1,14184,14185"},{"id": "14", "parentid": "14185", "name": "Sección de Promoción Económica e Emprego", "path" :"100,20,1,14184,14185"},{"id": "10220", "parentid": "14", "name": "Negociado de Promoción Económica", "path" :"100,20,1,14184,14185,14"},{"id": "14187", "parentid": "3", "name": "Sección de Desenvolvemento Territorial, Cooperación e Medio Ambiente", "path" :"100,20,1,14184,3"},{"id": "6233", "parentid": "4221", "name": "Grupo Popular", "path" :"100,20,1,4221"},{"id": "16248", "parentid": "4221", "name": "Alternativa dos Veciños", "path" :"100,20,1,4221"},{"id": "16246", "parentid": "4221", "name": "Marea Atlántica", "path" :"100,20,1,4221"},{"id": "16247", "parentid": "4221", "name": "Compostela Aberta", "path" :"100,20,1,4221"},{"id": "9364", "parentid": "4221", "name": "Grupo Socialista", "path" :"100,20,1,4221"},{"id": "9365", "parentid": "4221", "name": "Grupo BNG", "path" :"100,20,1,4221"},{"id": "6188", "parentid": "609", "name": "Oficialía Maior&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0