2c:null 2d:["$","title",null,{"children":"d3.v5 Org Chart | Hermann Zschiegner | Observable"}] 32:Ta5a,data = dataFlattened.map(d=>{ const width = 350 //Math.round(Math.random()*50+300); const height = 160 // Math.round(Math.random()*20+130); const cornerShape = 'ROUNDED'; //['ORIGINAL','ROUNDED','CIRCLE'] const nodeImageWidth = 100; const nodeImageHeight = 100; const centerTopDistance = 0; const centerLeftDistance = 0; const expanded = false; //d.id=="O-6" const titleMarginLeft = nodeImageWidth/2+20+centerLeftDistance const contentMarginLeft = width/2+25 return { nodeId:d.id, parentNodeId:d.parentId, width:width, height:height, borderWidth:0.6, borderRadius:0, borderColor:{ red:15, green:140, blue:121, alpha:0.7, }, backgroundColor:{ red:247, green:247, blue:249, alpha:0.4, }, nodeIcon:{ size:50, }, nodeImage:{ url:d.imageUrl, width:nodeImageWidth, height:nodeImageHeight, centerTopDistance:66, centerLeftDistance:66, cornerShape:'CIRCLE', // ORIGINAL,CIRCLE shadow:false, borderWidth:0, borderColor:{ red:19, green:123, blue:128, alpha:0, }, }, template:`

${d.name}

${d.positionName}

${d.unit.value}

${d.office}

${d.area}

`, connectorLineColor:{ red:59, green:60, blue:63, alpha:1 }, connectorLineWidth:2, dashArray:'', expanded:expanded } })33:T961d,class TreeChart { constructor() { // Exposed variables const attrs = { id: `ID${Math.floor(Math.random() * 1000000)}`, // Id for event handlings svgWidth: 800, svgHeight: 600, marginTop: 0, marginBottom: 0, marginRight: 0, marginLeft: 0, container: 'body', defaultTextFill: '#2C3E50', nodeTextFill: 'white', defaultFont: 'Helvetica', backgroundColor: '#DFE3E9', data: null, depth: 180, duration: 600, strokeWidth: 3, dropShadowId: null, initialZoom: 1, onNodeClick: d => d, }; this.getChartState = () => attrs; // Dynamically set getter and setter functions for Chart class Object.keys(attrs).forEach((key) => { //@ts-ignore this[key] = function (_) { var string = `attrs['${key}'] = _`; if (!arguments.length) { return eval(`attrs['${key}'];`); } eval(string); return this; }; }); this.initializeEnterExitUpdatePattern(); } initializeEnterExitUpdatePattern() { d3.selection.prototype.patternify = function (params) { var container = this; var selector = params.selector; var elementTag = params.tag; var data = params.data || [selector]; // Pattern in action var selection = container.selectAll('.' + selector).data(data, (d, i) => { if (typeof d === 'object') { if (d.id) { return d.id; } } return i; }); selection.exit().remove(); selection = selection.enter().append(elementTag).merge(selection); selection.attr('class', selector); return selection; }; } // This method retrieves passed node's children IDs (including node) getNodeChildrenIds({ data, children, _children }, nodeIdsStore) { // Store current node ID nodeIdsStore.push(data.nodeId); // Loop over children and recursively store descendants id (expanded nodes) if (children) { children.forEach(d => { this.getNodeChildrenIds(d, nodeIdsStore) }) } // Loop over _children and recursively store descendants id (collapsed nodes) if (_children) { _children.forEach(d => { this.getNodeChildrenIds(d, nodeIdsStore) }) } // Return result return nodeIdsStore; } // This method can be invoked via chart.setZoomFactor API, it zooms to particulat scale setZoomFactor(zoomLevel) { const attrs = this.getChartState(); const calc = attrs.calc; // Store passed zoom level attrs.initialZoom = zoomLevel; // Rescale container element accordingly attrs.centerG.attr('transform', ` translate(${calc.centerX}, ${calc.nodeMaxHeight / 2}) scale(${attrs.initialZoom})`) } render() { //InnerFunctions which will update visuals const attrs = this.getChartState(); const thisObjRef = this; //Drawing containers const container = d3.select(attrs.container); const containerRect = container.node().getBoundingClientRect(); if (containerRect.width > 0) attrs.svgWidth = containerRect.width; //Attach drop shadow id to attrs object this.setDropShadowId(attrs); //Calculated properties const calc = { id: null, chartTopMargin: null, chartLeftMargin: null, chartWidth: null, chartHeight: null }; calc.id = `ID${Math.floor(Math.random() * 1000000)}`; // id for event handlings calc.chartLeftMargin = attrs.marginLeft; calc.chartTopMargin = attrs.marginTop; calc.chartWidth = attrs.svgWidth - attrs.marginRight - calc.chartLeftMargin; calc.chartHeight = attrs.svgHeight - attrs.marginBottom - calc.chartTopMargin; attrs.calc = calc; // Get maximum node width and height calc.nodeMaxWidth = d3.max(attrs.data, ({ width }) => width); calc.nodeMaxHeight = d3.max(attrs.data, ({ height }) => height); // Calculate max node depth (it's needed for layout heights calculation) attrs.depth = calc.nodeMaxHeight + 100; calc.centerX = calc.chartWidth / 2; //******************** LAYOUTS *********************** const layouts = { treemap: null } attrs.layouts = layouts; // Generate tree layout function layouts.treemap = d3.tree().size([calc.chartWidth, calc.chartHeight]) .nodeSize([calc.nodeMaxWidth + 100, calc.nodeMaxHeight + attrs.depth]) // ******************* BEHAVIORS . ********************** const behaviors = { zoom: null } // Get zooming function behaviors.zoom = d3.zoom().on("zoom", d => this.zoomed(d)) //****************** ROOT node work ************************ // Convert flat data to hierarchical attrs.root = d3.stratify() .id(({ nodeId }) => nodeId) .parentId(({ parentNodeId }) => parentNodeId) (attrs.data) // Set child nodes enter appearance positions attrs.root.x0 = 0; attrs.root.y0 = 0; /** Get all nodes as array (with extended parent & children properties set) This way we can access any node's parent directly using node.parent - pretty cool, huh? */ attrs.allNodes = attrs.layouts.treemap(attrs.root).descendants() // Assign direct children and total subordinate children's cound attrs.allNodes.forEach(d => { Object.assign(d.data, { directSubordinates: d.children ? d.children.length : 0, totalSubordinates: d.descendants().length - 1 }) }) // Collapse all children at first attrs.root.children.forEach(d => this.collapse(d)); // Then expand some nodes, which have `expanded` property set attrs.root.children.forEach(d => this.expandSomeNodes(d)); // ************************* DRAWING ************************** //Add svg const svg = container .patternify({ tag: 'svg', selector: 'svg-chart-container' }) .attr('width', attrs.svgWidth) .attr('height', attrs.svgHeight) .attr('font-family', attrs.defaultFont) .call(behaviors.zoom) .on('dblclick.zoom',null) .attr('cursor', 'move') .style('background-image','linear-gradient(to right , #fcfaf8, #E3E7EC);padding-top:10px') attrs.svg = svg; //Add container g element const chart = svg .patternify({ tag: 'g', selector: 'chart' }) .attr('transform', `translate(${calc.chartLeftMargin},${calc.chartTopMargin})`); // Add one more container g element, for better positioning controls attrs.centerG = chart.patternify({ tag: 'g', selector: 'center-group' }) .attr('transform', `translate(${calc.centerX},${calc.nodeMaxHeight / 2}) scale(${attrs.initialZoom})`); attrs.chart = chart; // ************************** ROUNDED AND SHADOW IMAGE WORK USING SVG FILTERS ********************** //Adding defs element for rounded image attrs.defs = svg.patternify({ tag: 'defs', selector: 'image-defs' }); // Adding defs element for image's shadow const filterDefs = svg.patternify({ tag: 'defs', selector: 'filter-defs' }); // Adding shadow element - (play with svg filter here - https://bit.ly/2HwnfyL) const filter = filterDefs.patternify({ tag: 'filter', selector: 'shadow-filter-element' }) .attr('id', attrs.dropShadowId) .attr('y', `${-200}%`) .attr('x', `${-200}%`) .attr('height', `${400}%`) .attr('width', `${400}%`); // Add gaussian blur element for shadows - we can control shadow length with this filter.patternify({ tag: 'feGaussianBlur', selector: 'feGaussianBlur-element' }) .attr('in', 'SourceAlpha') .attr('stdDeviation', 5.1) .attr('result', 'blur'); // Add fe-offset element for shadows - we can control shadow positions with it filter.patternify({ tag: 'feOffset', selector: 'feOffset-element' }) .attr('in', 'blur') .attr('result', 'offsetBlur') .attr("dx", 15.28) .attr("dy", 10.48) .attr("x", -350) .attr("y", -140) // Add fe-flood element for shadows - we can control shadow color and opacity with this element filter.patternify({ tag: 'feFlood', selector: 'feFlood-element' }) .attr("in", "offsetBlur") .attr("flood-color", 'black') .attr("flood-opacity", 0.2) .attr("result", "offsetColor"); // Add feComposite element for shadows filter.patternify({ tag: 'feComposite', selector: 'feComposite-element' }) .attr("in", "offsetColor") .attr("in2", "offsetBlur") .attr("operator", "in") .attr("result", "offsetBlur"); // Add feMerge element for shadows const feMerge = filter.patternify({ tag: 'feMerge', selector: 'feMerge-element' }); // Add feMergeNode element for shadows feMerge.patternify({ tag: 'feMergeNode', selector: 'feMergeNode-blur' }) .attr('in', 'offsetBlur') // Add another feMergeNode element for shadows feMerge.patternify({ tag: 'feMergeNode', selector: 'feMergeNode-graphic' }) .attr('in', 'SourceGraphic') // Display tree contenrs this.update(attrs.root) //######################################### UTIL FUNCS ################################## // This function restyles foreign object elements () d3.select(window).on(`resize.${attrs.id}`, () => { const containerRect = container.node().getBoundingClientRect(); // if (containerRect.width > 0) attrs.svgWidth = containerRect.width; // main(); }); return this; } // This function sets drop shadow ID to the passed object setDropShadowId(d) { // If it's already set, then return if (d.dropShadowId) return; // Generate drop shadow ID let id = `${d.id}-drop-shadow`; // If DOM object is available, then use UID method to generated shadow id //@ts-ignore if (typeof DOM != 'undefined') { //@ts-ignore id = DOM.uid(d.id).id; } // Extend passed object with drop shadow ID Object.assign(d, { dropShadowId: id }) } // This function can be invoked via chart.addNode API, and it adds node in tree at runtime addNode(obj) { const attrs = this.getChartState(); attrs.data.push(obj); // Update state of nodes and redraw graph this.updateNodesState(); return this; } // This function can be invoked via chart.removeNode API, and it removes node from tree at runtime removeNode(nodeId) { const attrs = this.getChartState(); const node = attrs.allNodes.filter(({ data }) => data.nodeId == nodeId)[0]; // Remove all node childs if (node) { // Retrieve all children nodes ids (including current node itself) const nodeChildrenIds = this.getNodeChildrenIds(node, []); // Filter out retrieved nodes and reassign data attrs.data = attrs.data.filter(d => !nodeChildrenIds.includes(d.nodeId)) const updateNodesState = this.updateNodesState.bind(this); // Update state of nodes and redraw graph updateNodesState(); } } // This function basically redraws visible graph, based on nodes state update({ x0, y0, x, y }) { const attrs = this.getChartState(); const calc = attrs.calc; // Assigns the x and y position for the nodes const treeData = attrs.layouts.treemap(attrs.root); // Get tree nodes and links and attach some properties const nodes = treeData.descendants() .map(d => { // If at least one property is already set, then we don't want to reset other properties if (d.width) return d; // Declare properties with deffault values let imageWidth = 100; let imageHeight = 100; let imageBorderColor = 'steelblue'; let imageBorderWidth = 0; let imageRx = 0; let imageCenterTopDistance = 0; let imageCenterLeftDistance = 0; let borderColor = 'steelblue'; let backgroundColor = 'steelblue'; let width = d.data.width; let height = d.data.height; let dropShadowId = `none`; // Override default values based on data if (d.data.nodeImage && d.data.nodeImage.shadow) { dropShadowId = `url(#${attrs.dropShadowId})` } if (d.data.nodeImage && d.data.nodeImage.width) { imageWidth = d.data.nodeImage.width }; if (d.data.nodeImage && d.data.nodeImage.height) { imageHeight = d.data.nodeImage.height }; if (d.data.nodeImage && d.data.nodeImage.borderColor) { imageBorderColor = this.rgbaObjToColor(d.data.nodeImage.borderColor) }; if (d.data.nodeImage && d.data.nodeImage.borderWidth) { imageBorderWidth = d.data.nodeImage.borderWidth }; if (d.data.nodeImage && d.data.nodeImage.centerTopDistance) { imageCenterTopDistance = d.data.nodeImage.centerTopDistance }; if (d.data.nodeImage && d.data.nodeImage.centerLeftDistance) { imageCenterLeftDistance = d.data.nodeImage.centerLeftDistance }; if (d.data.borderColor) { borderColor = this.rgbaObjToColor(d.data.borderColor); } if (d.data.backgroundColor) { backgroundColor = this.rgbaObjToColor(d.data.backgroundColor); } if (d.data.nodeImage && d.data.nodeImage.cornerShape.toLowerCase() == "circle") { imageRx = Math.max(imageWidth, imageHeight); } if (d.data.nodeImage && d.data.nodeImage.cornerShape.toLowerCase() == "rounded") { imageRx = Math.min(imageWidth, imageHeight) / 6; } // Extend node object with calculated properties return Object.assign(d, { imageWidth, imageHeight, imageBorderColor, imageBorderWidth, borderColor, backgroundColor, imageRx, width, height, imageCenterTopDistance, imageCenterLeftDistance, dropShadowId }); }); // Get all links const links = treeData.descendants().slice(1); // Set constant depth for each nodes nodes.forEach(d => d.y = d.depth * attrs.depth); // ------------------- FILTERS --------------------- // Add patterns for each node (it's needed for rounded image implementation) const patternsSelection = attrs.defs.selectAll('.pattern') .data(nodes, ({ id }) => id); // Define patterns enter selection const patternEnterSelection = patternsSelection.enter().append('pattern') // Patters update selection const patterns = patternEnterSelection .merge(patternsSelection) .attr('class', 'pattern') .attr('height', 1) .attr('width', 1) .attr('id', ({ id }) => id) // Add images to patterns const patternImages = patterns.patternify({ tag: 'image', selector: 'pattern-image', data: d => [d] }) .attr('x', 0) .attr('y', 0) .attr('height', ({ imageWidth }) => imageWidth) .attr('width', ({ imageHeight }) => imageHeight) .attr('xlink:href', ({ data }) => data.nodeImage && data.nodeImage.url) .attr('viewbox', ({ imageWidth, imageHeight }) => `0 0 ${imageWidth * 2} ${imageHeight}`) .attr('preserveAspectRatio', 'xMidYMin slice') // Remove patterns exit selection after animation patternsSelection.exit().transition().duration(attrs.duration).remove(); // -------------------------- LINKS ---------------------- // Get links selection const linkSelection = attrs.centerG.selectAll('path.link') .data(links, ({ id }) => id); // Enter any new links at the parent's previous position. const linkEnter = linkSelection.enter() .insert('path', "g") .attr("class", "link") .attr('d', d => { const o = { x: x0, y: y0 }; return this.diagonal(o, o) }); // Get links update selection const linkUpdate = linkEnter.merge(linkSelection); // Styling links linkUpdate .attr("fill", "none") .attr("stroke-width", ({ data }) => data.connectorLineWidth || 2) .attr('stroke', ({ data }) => { if (data.connectorLineColor) { return this.rgbaObjToColor(data.connectorLineColor); } return 'green'; }) .attr('stroke-dasharray', ({ data }) => { if (data.dashArray) { return data.dashArray; } return ''; }) // Transition back to the parent element position linkUpdate.transition() .duration(attrs.duration) .attr('d', d => this.diagonal(d, d.parent)); // Remove any links which is exiting after animation const linkExit = linkSelection.exit().transition() .duration(attrs.duration) .attr('d', d => { const o = { x: x, y: y }; return this.diagonal(o, o) }) .remove(); // -------------------------- NODES ---------------------- // Get nodes selection const nodesSelection = attrs.centerG.selectAll('g.node') .data(nodes, ({ id }) => id) // Enter any new nodes at the parent's previous position. const nodeEnter = nodesSelection.enter().append('g') .attr('class', 'node') .attr("transform", d => `translate(${x0},${y0})`) .attr('cursor', 'pointer') .on('click', ({ data }) => { if ([...d3.event.srcElement.classList].includes('node-button-circle')) { return; } attrs.onNodeClick(data.nodeId); }); // Add background rectangle for the nodes nodeEnter .patternify({ tag: 'rect', selector: 'node-rect', data: d => [d] }) .style("fill", ({ _children }) => _children ? "lightsteelblue" : "#fff") /* // Add node icon image inside node nodeEnter .patternify({ tag: 'image', selector: 'node-icon-image', data: d => [d] }) .attr('width', ({ data }) => data.nodeIcon && data.nodeIcon.size) .attr('height', ({ data }) => data.nodeIcon && data.nodeIcon.size) .attr("xlink:href", ({ data }) => data.nodeIcon && data.nodeIcon.icon) .attr('x', ({ width }) => -width / 2 + 5) .attr('y', ({ height, data }) => height / 2 - (data.nodeIcon && data.nodeIcon.size || 0) - 5) // Add total descendants text nodeEnter .patternify({ tag: 'text', selector: 'node-icon-text-total', data: d => [d] }) .text('test') .attr('x', ({ width }) => -width / 2 + 7) .attr('y', ({ height, data }) => height / 2 - (data.nodeIcon && data.nodeIcon.size) - 5) .text(({ data }) => `${data.totalSubordinates} Subordinates`) .attr('fill', attrs.nodeTextFill) .attr('font-weight', 'bold') // Add direct descendants text nodeEnter .patternify({ tag: 'text', selector: 'node-icon-text-direct', data: d => [d] }) .text('test') .attr('x', ({ width, data }) => -width / 2 + 10 + (data.nodeIcon && data.nodeIcon.size)) .attr('y', ({ height }) => height / 2 - 10) .text(({ data }) => `${data.directSubordinates} Direct `) .attr('fill', attrs.nodeTextFill) .attr('font-weight', 'bold') */ // Node update styles const nodeUpdate = nodeEnter.merge(nodesSelection) .style('font', '12px sans-serif'); // Add foreignObject element inside rectangle const fo = nodeUpdate .patternify({ tag: 'foreignObject', selector: 'node-foreign-object', data: d => [d] }) const nodeImageGroups = nodeUpdate.patternify({ tag: 'g', selector: 'node-image-group', data: d => [d] }) // Add background rectangle for node image nodeImageGroups .patternify({ tag: 'rect', selector: 'node-image-rect', data: d => [d] }) // Add foreign object fo.patternify({ tag: 'xhtml:div', selector: 'node-foreign-object-div', data: d => [d] }) this.restyleForeignObjectElements(); // Add Node button circle's group (expand-collapse button) const nodeButtonGroups = nodeEnter .patternify({ tag: 'g', selector: 'node-button-g', data: d => [d] }) .on('click', d => this.onButtonClick(d)) // Add expand collapse button circle nodeButtonGroups .patternify({ tag: 'circle', selector: 'node-button-circle', data: d => [d] }) // Add button text nodeButtonGroups .patternify({ tag: 'text', selector: 'node-button-text', data: d => [d] }) .attr('pointer-events', 'none') // Transition to the proper position for the node nodeUpdate.transition() .attr('opacity', 0) .duration(attrs.duration) .attr("transform", ({ x, y }) => `translate(${x},${y})`) .attr('opacity', 1) // Move images to desired positions nodeUpdate.selectAll('.node-image-group') .attr('transform', ({ imageWidth, width, imageHeight, height }) => { let x = -imageWidth / 2 - width / 2; let y = -imageHeight / 2 - height / 2; return `translate(${x},${y})` }) // Style node image rectangles nodeUpdate.select('.node-image-rect') .attr('fill', ({ id }) => `url(#${id})`) .attr('width', ({ imageWidth }) => imageWidth) .attr('height', ({ imageHeight }) => imageHeight) .attr('stroke', ({ imageBorderColor }) => imageBorderColor) .attr('stroke-width', ({ imageBorderWidth }) => imageBorderWidth) .attr('rx', ({ imageRx }) => imageRx) .attr('y', ({ imageCenterTopDistance }) => imageCenterTopDistance) .attr('x', ({ imageCenterLeftDistance }) => imageCenterLeftDistance) .attr('filter', ({ dropShadowId }) => dropShadowId) // Style node rectangles nodeUpdate.select('.node-rect') .attr('width', ({ data }) => data.width) .attr('height', ({ data }) => data.height) .attr('x', ({ data }) => -data.width / 2) .attr('y', ({ data }) => -data.height / 2) .attr('rx', ({ data }) => data.borderRadius || 0) .attr('stroke-width', ({ data }) => data.borderWidth!=null? data.borderWidth : attrs.strokeWidth) .attr('cursor', 'pointer') .attr('stroke', ({ borderColor }) => borderColor) .style("fill", ({ backgroundColor }) => backgroundColor) .attr('filter', ({ dropShadowId }) => dropShadowId) // Move node button group to the desired position nodeUpdate.select('.node-button-g') .attr('transform', ({ data }) => `translate(0,${data.height / 2})`) .attr('opacity', ({ children, _children }) => { if (children || _children) { return 1; } return 0; }) // Restyle node button circle nodeUpdate.select('.node-button-circle') .attr('r', 16) .attr('stroke-width', ({ data }) => data.borderWidth || attrs.strokeWidth) .attr('fill', attrs.backgroundColor) .attr('stroke', ({ borderColor }) => borderColor) // Restyle button texts nodeUpdate.select('.node-button-text') .attr('text-anchor', 'middle') .attr('alignment-baseline', 'middle') .attr('fill', attrs.defaultTextFill) .attr('font-size', ({ children }) => { if (children) return 40; return 26; }) .text(({ children }) => { if (children) return '-'; return '+'; }) .attr('y', this.isEdge() ? 10 : 0) // Remove any exiting nodes after transition const nodeExitTransition = nodesSelection.exit() .attr('opacity', 1) .transition() .duration(attrs.duration) .attr("transform", d => `translate(${x},${y})`) .on('end', function () { d3.select(this).remove(); }) .attr('opacity', 0); // On exit reduce the node rects size to 0 nodeExitTransition.selectAll('.node-rect') .attr('width', 10) .attr('height', 10) .attr('x', 0) .attr('y', 0); // On exit reduce the node image rects size to 0 nodeExitTransition.selectAll('.node-image-rect') .attr('width', 10) .attr('height', 10) .attr('x', ({ width }) => width / 2) .attr('y', ({ height }) => height / 2) // Store the old positions for transition. nodes.forEach(d => { d.x0 = d.x; d.y0 = d.y; }); } // This function detects whether current browser is edge isEdge() { return window.navigator.userAgent.includes("Edge"); } /* Function converts rgba objects to rgba color string {red:110,green:150,blue:255,alpha:1} => rgba(110,150,255,1) */ rgbaObjToColor({ red, green, blue, alpha }) { return `rgba(${red},${green},${blue},${alpha})`; } // Generate custom diagonal - play with it here - https://observablehq.com/@bumbeishvili/curved-edges?collection=@bumbeishvili/work-components diagonal(s, t) { // Calculate some variables based on source and target (s,t) coordinates const x = s.x; const y = s.y; const ex = t.x; const ey = t.y; let xrvs = ex - x < 0 ? -1 : 1; let yrvs = ey - y < 0 ? -1 : 1; let rdef = 35; let rInitial = Math.abs(ex - x) / 2 < rdef ? Math.abs(ex - x) / 2 : rdef; let r = Math.abs(ey - y) / 2 < rInitial ? Math.abs(ey - y) / 2 : rInitial; let h = Math.abs(ey - y) / 2 - r; let w = Math.abs(ex - x) - r * 2; // Build the path const path = ` M ${x} ${y} L ${x} ${y + h * yrvs} C ${x} ${y + h * yrvs + r * yrvs} ${x} ${y + h * yrvs + r * yrvs} ${x + r * xrvs} ${y + h * yrvs + r * yrvs} L ${x + w * xrvs + r * xrvs} ${y + h * yrvs + r * yrvs} C ${ex} ${y + h * yrvs + r * yrvs} ${ex} ${y + h * yrvs + r * yrvs} ${ex} ${ey - h * yrvs} L ${ex} ${ey} ` // Return result return path; } restyleForeignObjectElements() { const attrs = this.getChartState(); attrs.svg.selectAll('.node-foreign-object') .attr('width', ({ width }) => width) .attr('height', ({ height }) => height) .attr('x', ({ width }) => -width / 2) .attr('y', ({ height }) => -height / 2) attrs.svg.selectAll('.node-foreign-object-div') .style('width', ({ width }) => `${width}px`) .style('height', ({ height }) => `${height}px`) .style('color', 'white') .html(({ data }) => data.template) } // Toggle children on click. onButtonClick(d) { // If childrens are expanded if (d.children) { //Collapse them d._children = d.children; d.children = null; // Set descendants expanded property to false this.setExpansionFlagToChildren(d, false); } else { // Expand children d.children = d._children; d._children = null; // Set each children as expanded d.children.forEach(({ data }) => data.expanded = true) } // Redraw Graph this.update(d); } // This function changes `expanded` property to descendants setExpansionFlagToChildren({ data, children, _children }, flag) { // Set flag to the current property data.expanded = flag; // Loop over and recursively update expanded children's descendants if (children) { children.forEach(d => { this.setExpansionFlagToChildren(d, flag) }) } // Loop over and recursively update collapsed children's descendants if (_children) { _children.forEach(d => { this.setExpansionFlagToChildren(d, flag) }) } } // This function can be invoked via chart.setExpanded API, it expands or collapses particular node setExpanded(id, expandedFlag) { const attrs = this.getChartState(); // Retrieve node by node Id const node = attrs.allNodes.filter(({ data }) => data.nodeId == id)[0] // If node exists, set expansion flag if (node) node.data.expanded = expandedFlag; // First expand all nodes attrs.root.children.forEach(d => this.expand(d)); // Expand root's chilren in case they are collapsed if(attrs.root._children){ attrs.root._children.forEach(d => this.expand(d)); } // Then collapse all nodes attrs.root.children.forEach(d => this.collapse(d)); // Then expand only the nodes, which were previously expanded, or have an expand flag set attrs.root.children.forEach(d => this.expandSomeNodes(d)); // Redraw graph this.update(attrs.root); } // Method which only expands nodes, which have property set "expanded=true" expandSomeNodes(d) { // If node has expanded property set if (d.data.expanded) { // Retrieve node's parent let parent = d.parent; // While we can go up while (parent) { // Expand all current parent's children if (parent._children) { parent.children = parent._children; } // Replace current parent holding object parent = parent.parent; } } // Recursivelly do the same for collapsed nodes if (d._children) { d._children.forEach(ch => this.expandSomeNodes(ch)); } // Recursivelly do the same for expanded nodes if (d.children) { d.children.forEach(ch => this.expandSomeNodes(ch)); } } // This function updates nodes state and redraws graph, usually after data change updateNodesState() { const attrs = this.getChartState(); // Store new root by converting flat data to hierarchy attrs.root = d3.stratify() .id(({ nodeId }) => nodeId) .parentId(({ parentNodeId }) => parentNodeId) (attrs.data) // Store positions, where children appear during their enter animation attrs.root.x0 = 0; attrs.root.y0 = 0; // Store all nodes in flat format (although, now we can browse parent, see depth e.t.c. ) attrs.allNodes = attrs.layouts.treemap(attrs.root).descendants() // Store direct and total descendants count attrs.allNodes.forEach(d => { Object.assign(d.data, { directSubordinates: d.children ? d.children.length : 0, totalSubordinates: d.descendants().length - 1 }) }) // Expand all nodes first attrs.root.children.forEach(this.expand); // Then collapse them all attrs.root.children.forEach(d => this.collapse(d)); // Then only expand nodes, which have expanded proprty set to true attrs.root.children.forEach(ch => this.expandSomeNodes(ch)); // Redraw Graphs this.update(attrs.root) } // Function which collapses passed node and it's descendants collapse(d) { if (d.children) { d._children = d.children; d._children.forEach(ch => this.collapse(ch)); d.children = null; } } // Function which expands passed node and it's descendants expand(d) { if (d._children) { d.children = d._children; d.children.forEach(ch => this.expand(ch)); d._children = null; } } // Zoom handler function zoomed() { const attrs = this.getChartState(); const chart = attrs.chart; // Get d3 event's transform object const transform = d3.event.transform; // Store it attrs.lastTransform = transform; // Reposition and rescale chart accordingly chart.attr('transform', transform); // Apply new styles to the foreign object element if (this.isEdge()) { this.restyleForeignObjectElements(); } } } 34:T9b0,{ // EXPAND addBtn; if(this){ setTimeout(d=>{ const node = { "nodeId": DOM.uid().id, "parentNodeId": "O-1", "width": 330, "height": 147, "borderWidth": 1, "borderRadius": 5, "borderColor": { "red": 15, "green": 140, "blue": 121, "alpha": 1 }, "backgroundColor": { "red": 51, "green": 182, "blue": 208, "alpha": 1 }, "nodeImage": { "url": "https://raw.githubusercontent.com/bumbeishvili/Assets/master/Projects/D3/Organization%20Chart/general.jpg", "width": 100, "height": 100, "centerTopDistance": 0, "centerLeftDistance": 0, "cornerShape": "ROUNDED", "shadow": false, "borderWidth": 0, "borderColor": { "red": 19, "green": 123, "blue": 128, "alpha": 1 } }, "nodeIcon": { "icon": "https://to.ly/1yZnX", "size": 30 }, "connectorLineColor": { "red": 220, "green": 189, "blue": 207, "alpha": 1 }, "connectorLineWidth": 5, "dashArray": "", "expanded": false, template:`

Added Root Child

Added position

Added unit

Added office

Added area

` } chart.addNode(node) },600) return true; } return !this; }35:T9b6,{ // EXPAND addBtnG; if(this){ setTimeout(d=>{ const node = { "nodeId": DOM.uid().id, "parentNodeId": "O-2", "width": 330, "height": 147, "borderWidth": 1, "borderRadius": 5, "borderColor": { "red": 15, "green": 140, "blue": 121, "alpha": 1 }, "backgroundColor": { "red": 51, "green": 182, "blue": 208, "alpha": 1 }, "nodeImage": { "url": "https://raw.githubusercontent.com/bumbeishvili/Assets/master/Projects/D3/Organization%20Chart/general.jpg", "width": 100, "height": 100, "centerTopDistance": 0, "centerLeftDistance": 0, "cornerShape": "ROUNDED", "shadow": false, "borderWidth": 0, "borderColor": { "red": 19, "green": 123, "blue": 128, "alpha": 1 } }, "nodeIcon": { "icon": "https://to.ly/1yZnX", "size": 30 }, "connectorLineColor": { "red": 220, "green": 189, "blue": 207, "alpha": 1 }, "connectorLineWidth": 5, "dashArray": "", "expanded":true, template:`

Added Root Grand Child

Added position

Added unit

Added office

Added area

` } chart.addNode(node) },600) return true; } return !this; }36:[] 30:{"id":"96a638fedd582c85","slug":"d3-v5-org-chart","title":"d3.v5 Org Chart","thumbnail":"65115964ee4c539b150a319e85df941a2b89f8a6bac3a6fa06c3b1178f6f578f","access_level":"public","create_time":"$D2021-06-08T19:47:13.041Z","update_time":"$D2021-06-08T19:47:13.041Z","view_time":null,"first_public_time":"$D2021-06-08T19:47:21.369Z","has_unpublished_edits":null,"fork":{"id":"faa112f2b876e54a","slug":"d3-v5-organization-chart","title":"d3.v5 Org Chart - last updated at Jun 2022","owner":{"id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B."}},"stars":1,"starred":false,"owner":{"type":"team","id":"289b294903dd96dd","login":"hzschie","name":"Hermann Zschiegner","avatar_url":"https://avatars-next.observableusercontent.com/03082060091459354a268bf139a434301b82d61d8334dfda0219a270398b70ac","tier":"starter_2024"},"version":1785,"publish_version":1785,"role":null,"authored":false,"authors":[{"type":"individual","id":"72fcffbbad5f6489","login":"hzschie","name":"Hermann Zschiegner","avatar_url":"https://avatars-next.observableusercontent.com/03082060091459354a268bf139a434301b82d61d8334dfda0219a270398b70ac","tier":null}],"members":[{"type":"individual","id":"72fcffbbad5f6489","login":"hzschie","name":"Hermann Zschiegner","avatar_url":"https://avatars-next.observableusercontent.com/03082060091459354a268bf139a434301b82d61d8334dfda0219a270398b70ac","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"d3.v5 Org Chart","cells":[{"id":0,"value":"md`# d3.v5 Org Chart \n\n${(navigator.userAgent.match('HeadlessChrome')) ? html`

` : ''}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1158,"value":"viewof expandBtn = button('expand node with id O-111')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"value":"viewof collapseBtn = button('collapse node with id O-111')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1270,"value":"viewof addBtn = button(`add node as root's child`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1273,"value":"viewof addBtnG = button(`add node as first child's child`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"viewof removeBtn = button(`remove node id=\"0-5\"`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"viewof removeGrandChildBtn = button(`remove node id=\"0-6\"`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1089,"value":"viewof zoom = slider({title:\"Initial zoom\",min:0.1,value:0.6,max:2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"container ={\n TreeChart;\n yield html`

` \n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"md`Data has a flat format and it can be inspected just one cell bellow`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"md`We are instantiating visuals bellow, container can be raw html element (our case) or css selector, it gets wrapped using \\`d3.select\\`\n\nYou can inspect data just above this snippet (data must be array of objects)\n\n`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"chart = new TreeChart()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1243,"value":"chartRendering = {\n chart\n .container(container)\n .data(data)\n .svgWidth(width)\n .onNodeClick(d=> console.log(d+' node clicked'))\n .render()\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"md`Function bellow is responsible for chart drawing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1463,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1538,"value":"md`\n\\`\\`\\`typescript\ninterface Chart {\n\tgetAttrs: () => any;\n\tcontainer: (d?: any) => any;\n\tsvgWidth: (d?: any) => any;\n\tgetChartState: (d?: any) => any;\n\tupdateData: (d?: any) => any;\n}\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"md`Following content is just a little snippet to make code above typescript compatible\n\nBottom parts aren't interesting, they serve other technical purpose\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"function typescriptify(str){\n\n return str.replace(/\\t/g,' ')\n .replace(/attrs\\s?=/g,'attrs:any = ')\n \n \n .replace(/calc\\s?=/g,'calc:any = ')\n .replace(/\$d\$\\s*\\{/g,'(d:any){')\n .replace(/d=>/g,'(d:any)=>')\n .replace(/d =>/g,'(d:any)=>')\n .replace(/ch =>/g,'(ch:any)=>')\n .replace(/\$d, i\$/g,'(d:any,i:number)')\n .replace(/\$s, t\$/g,'(s:any,t:any)')\n .replace(/\$params\$/g,'(params:any)')\n .replace(/\$id, expandedFlag\$/g,'(id:any,expandedFlag:boolean)')\n .replace(/\$node, flag\$/g,'(node:any,flag:boolean)')\n \n .replace(/\$node, nodeIdsStore\$/g,'(node:any,nodeIdsStore:any[])')\n \n \n \n .replace(/layouts\\s?=/g,'layouts:any = ')\n .replace(/behaviors\\s?=/g,'behaviors:any = ')\n .replace(/\$source\$/g,'(source:any)')\n .replace(/\\(\\s?d\\s?=>/g,'((d:any)=>')\n return str;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1185,"value":"md`## Button actions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1267,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1323,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1235,"value":"{\n // EXPAND\n removeBtn;\n if(this){\n setTimeout(d=>{\n chart.removeNode(\"O-5\")\n },300)\n \n return true;\n }\n return !this;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1353,"value":"{\n removeGrandChildBtn;\n if(this){\n setTimeout(d=>{\n chart.removeNode(\"O-6\")\n },450)\n \n return true;\n }\n return !this;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1205,"value":"{\n chartRendering;\n //ZOOM\n chart.setZoomFactor(zoom);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1188,"value":"{\n // EXPAND\n expandBtn;\n if(this){\n setTimeout(d=>{\n chart.setExpanded(\"O-111\",true)\n },900)\n \n return Math.random();\n }\n return !this;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"{\n // COLLAPSE\n collapseBtn;\n if(this){\n setTimeout(d=>{\n chart.setExpanded(\"O-111\",false)\n },100)\n return true;\n }\n return !this;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"md`## Data wrangling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"dataSource = load('https://raw.githubusercontent.com/bumbeishvili/Assets/master/Projects/D3/Organization%20Chart/redesignedChartLongData.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"dataFlattened = d3.hierarchy(dataSource)\n.descendants()\n.map((d,i)=>Object.assign(d,{id:DOM.uid().id}))\n.map(d=>Object.assign(d.data,{\n id:d.id,\n parentId:d.parent && d.parent.id\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`## Libs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require('d3@v5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import {load} from \"@bumbeishvili/fetcher\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"import {slider,button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 31:"$30:body"