var treeData = { "name": "Board", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/SitePages/Home.aspx", "children": [ { "name": "Executive", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/SitePages/Home.aspx", "children": [ { "name": "CEO's Office", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/CEO/SitePages/Home.aspx" }, { "name": "Legal & Integrity", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/LI/SitePages/Home.aspx",}, { "name": "Communications & Stakeholder Relations", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/CGR/SitePages/Home.aspx",}, { "name": "People & Culture", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/PC/SitePages/Home.aspx", "children": [ {"name": "Health, Safety, Environment & Wellbeing", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/PC/HSEW/SitePages/Home.aspx" }]}, {"name": "Finance & Risk", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FR/SitePages/Home.aspx", "children": [ {"name":"Financial Risk Register", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FR/FIN/SitePages/Home.aspx"} ] }, {"name":"Volunteers & Strategy", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/VS/SitePages/Home.aspx"}, {"name":"Infrastructure Services", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/IS/SitePages/Home.aspx"}, {"name":"Fire & Emergency Management", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SitePages/Home.aspx", "children":[ {"name":"Bushfire Portfolio", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/BP/SitePages/Home.aspx"}, {"name":"Capability & Growth Portfolio", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/CGP/SitePages/Home.aspx"}, {"name":"Regional Services Portfolio", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/RSP/SitePages/Home.aspx"}, {"name":"Training Portfolio", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/TP/SitePages/Home.aspx"}, {"name":"Urban Portfolio", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/UP/SitePages/Home.aspx"}, {"name":"South West Region", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SW/SitePages/Home.aspx", "children":[ {"name":"District 04", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SW/D04/SitePages/Home.aspx"}, {"name":"District 05", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SW/D05/SitePages/Home.aspx"}, {"name":"District 06", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SW/D06/SitePages/Home.aspx"}, {"name":"District 07", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SW/D07/SitePages/Home.aspx"}, ] }, {"name":"West Region", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/W/SitePages/Home.aspx", "children":[ {"name":"District 15", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/W/D15/SitePages/Home.aspx"}, {"name":"District 16", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/W/D16/SitePages/Home.aspx"}, {"name":"District 17", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/W/D17/SitePages/Home.aspx"}, ] }, {"name":"North West Region", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NW/SitePages/Home.aspx", "children":[ {"name":"District 02", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NW/D02/SitePages/Home.aspx"}, {"name":"District 14", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NW/D14/SitePages/Home.aspx"}, {"name":"District 18", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NW/D18/SitePages/Home.aspx"}, {"name":"District 20", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NW/D20/SitePages/Home.aspx"}, ] }, {"name":"North East Region", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NE/SitePages/Home.aspx", "children":[ {"name":"District 12", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NE/D12/SitePages/Home.aspx"}, {"name":"District 13", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NE/D13/SitePages/Home.aspx"}, {"name":"District 22", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NE/D22/SitePages/Home.aspx"}, {"name":"District 23", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NE/D23/SitePages/Home.aspx"}, {"name":"District 24", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NE/D24/SitePages/Home.aspx"}, ] }, {"name":"South East Region", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SE/SitePages/Home.aspx", "children":[ {"name":"District 08", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SE/D08/SitePages/Home.aspx"}, {"name":"District 09", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SE/D09/SitePages/Home.aspx"}, {"name":"District 10", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SE/D10/SitePages/Home.aspx"}, {"name":"District 11", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SE/D11/SitePages/Home.aspx"}, {"name":"District 27", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SE/D27/SitePages/Home.aspx"}, ] }, ] } ] } ] }; // Set the dimensions and margins of the diagram var margin = {top: 20, right: 90, bottom: 30, left: 90}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; // append the svg object to the body of the page // appends a 'group' element to 'svg' // moves the 'group' element to the top left margin var svg = d3.select("#Menu").append("svg") .attr("width", width + margin.right + margin.left) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var i = 0, duration = 750, root; // declares a tree layout and assigns the size var treemap = d3.tree().size([height, width]); // Assigns parent, children, height, depth root = d3.hierarchy(treeData, function(d) { return d.children; }); root.x0 = height / 2; root.y0 = 0; // Collapse after the second level root.children.forEach(collapse); update(root); // Collapse the node and all it's children function collapse(d) { if(d.children) { d._children = d.children d._children.forEach(collapse) d.children = null } } function update(source) { // Assigns the x and y position for the nodes var treeData = treemap(root); // Compute the new tree layout. var nodes = treeData.descendants(), links = treeData.descendants().slice(1); // Normalize for fixed-depth. nodes.forEach(function(d){ d.y = d.depth * 180}); // ****************** Nodes section *************************** // Update the nodes... var node = svg.selectAll('g.node') .data(nodes, function(d) {return d.id || (d.id = ++i); }); // Enter any new modes at the parent's previous position. var nodeEnter = node.enter().append('g') .attr('class', 'node') .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }); // Add Circle for the nodes nodeEnter.append('circle') .attr('class', 'node') .attr('r', 1e-6) .style("fill", function(d) { return d._children ? "#bdc3c7" : "#fff"; }) .on('click', click); // Add labels for the nodes nodeEnter.append('text') .attr("dy", ".30em") .attr("x", function(d) { return d.children || d._children ? -13 : 13; }) .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) .text(function(d) { return d.data.name; }) .attr('class','normalText') .on('click', hyperclick) .on('mouseover', function(d,i) { d3.select(this) .attr('class', 'bigText') .style('fill','#c0392b') ;}) .on('mouseout', function(d,i) { d3.select(this) .attr('class', 'normalText') .style('fill','black') ;}); function hyperclick(d) { window.open(d.data.url); } // UPDATE var nodeUpdate = nodeEnter.merge(node); // Transition to the proper position for the node nodeUpdate.transition() .duration(duration) .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); // Update the node attributes and style nodeUpdate.select('circle.node') .attr('r', 10) .style("fill", function(d) { return d._children ? "#bdc3c7" : "#fff"; }) .attr('cursor', 'pointer'); // Remove any exiting nodes var nodeExit = node.exit().transition() .duration(duration) .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) .remove(); // On exit reduce the node circles size to 0 nodeExit.select('circle') .attr('r', 1e-6); // On exit reduce the opacity of text labels nodeExit.select('text') .style('fill-opacity', 1e-6); // ****************** links section *************************** // Update the links... var link = svg.selectAll('path.link') .data(links, function(d) { return d.id; }); // Enter any new links at the parent's previous position. var linkEnter = link.enter().insert('path', "g") .attr("class", "link") .attr('d', function(d){ var o = {x: source.x0, y: source.y0} return diagonal(o, o) }); // UPDATE var linkUpdate = linkEnter.merge(link); // Transition back to the parent element position linkUpdate.transition() .duration(duration) .attr('d', function(d){ return diagonal(d, d.parent) }); // Remove any exiting links var linkExit = link.exit().transition() .duration(duration) .attr('d', function(d) { var o = {x: source.x, y: source.y} return diagonal(o, o) }) .remove(); // Store the old positions for transition. nodes.forEach(function(d){ d.x0 = d.x; d.y0 = d.y; }); // Creates a curved (diagonal) path from parent to the child nodes function diagonal(s, d) { path = `M ${s.y} ${s.x} C ${(s.y + d.y) / 2} ${s.x}, ${(s.y + d.y) / 2} ${d.x}, ${d.y} ${d.x}` return path } // Toggle children on click. function click(d) { if (d.children) { d._children = d.children; d.children = null; } else { d.children = d._children; d._children = null; } update(d); } }