<!DOCTYPE html> <meta charset="UTF-8"> <style> /* Make the badge float in the top right corner of the button */ .notification { background-color: #fa3e3e; border-radius: 2px; color: white; padding: 1px 3px; font-size: 10px; position: absolute; /* Position the badge within the relatively positioned button */ top: 0; right: 0; } .node circle { fill: #fff; stroke: steelblue; stroke-width: 3px; } .node text { font: 12px sans-serif; } .link { fill: none; stroke: #ccc; stroke-width: 2px; } </style> <body> <!-- load the d3.js library --> <script src="https://d3js.org/d3.v4.min.js"></script> <script> // 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("body").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]); var treeDataText = { "name": "Top Level", "children": [ { "name": "Level 2: A", "value": 1, "children": [ { "name": "Son of A", "value": 3 }, { "name": "Daughter of A", "value": 5 }, { "name": "Another Son of A", "value": 55 } ] }, { "name": "Level 2: B", "value": 15 } ] }; var treeData = { "name": "Top Level", "value": 2, "type": "black", "level": "red", "children": [ { "name": "Level 2: A", "value": 2, "type": "grey", "level": "red", "children": [ { "name": "Son of A", "value": 0, "type": "steelblue", "level": "orange" }, { "name": "Daughter of A", "value": 0, "type": "steelblue", "level": "red" } ] }, { "name": "Level 2: B", "value": 0, "type": "grey", "level": "green" } ] }; // 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 ? "lightsteelblue" : "#fff"; }) // Add labels for the nodes nodeEnter.append('text') .attr("dy", ".35em") .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; }); // Notification Sign nodeEnter.append('circle') .style("stroke","orange") .style("fill", "orange") .attr('class','NotificationSign') .attr('cx',10) .attr('cy',-10) .attr('r',function(d){ return d._children ? 1e-6 : 0; }); nodeEnter.append('text') .style("stroke","white") .style("fill", "white") .attr('class','NotificationSign') .attr('x',6) .attr('y',-6) .text(function(d){ return d._children ? "+" : ""; }); // Notification Number nodeEnter.append('circle') .style("stroke","#FF0000") .style("fill", "#FF0000") .attr('class','NotificationText') .attr('cx',17.5) .attr('cy',-17.5) .attr('r',function(d){ return d._children ? 1e-6 : 0; }); nodeEnter.append('text') .style("stroke","white") .style("fill", "white") .style("font-size",8) .attr('class','NotificationText') .attr('x',13) .attr('y',-13) .text(function(d){ return d._children ? d._children.length : ""; }); // 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) { // if have children goes lightsteelblue else white return d._children ? "lightsteelblue" : "#fff"; }) .attr('cursor', 'pointer'); nodeUpdate.select('circle.NotificationSign') .attr('r',function(d){ return d._children || d.children ? 8 : 0; }) .attr('cursor', 'pointer') .on('click', click); nodeUpdate.select('text.NotificationSign') .attr('x',6) .attr('y',-6) .text(function(d){ if(d._children) return "+"; else if (d.children) return "-"; else return ""; }) .attr('cursor', 'pointer') .on('click', click); // Notification Number nodeUpdate.select('circle.NotificationText') .style("stroke","#FF0000") .style("fill", "#FF0000") .attr('cx',17.5) .attr('cy',-17.5) .attr('r',function(d){ return d._children ? 6 : 0; }); nodeUpdate.select('text.NotificationText') .style("stroke","white") .style("fill", "white") .style("font-size",8) .attr('x',13) .attr('y',-13) .text(function(d){ return d._children ? d._children.length : ""; }); // 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.selectAll('circle') .attr('r', function(d) { if (d.r >0) return 1e-6; else return 0; }); // On exit reduce the opacity of text labels nodeExit.selectAll('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); } } </script> </body>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more