chart = { // Specify the charts’ dimensions. The height is variable, depending on the layout. const width = 928; const marginTop = 10; const marginRight = 10; const marginBottom = 10; const marginLeft = 40; // Rows are separated by dx pixels, columns by dy pixels. These names can be counter-intuitive // (dx is a height, and dy a width). This because the tree must be viewed with the root at the // “bottom”, in the data domain. The width of a column is based on the tree’s height. const root = d3.hierarchy(data); const dx = 10; const dy = (width - marginRight - marginLeft) / (1 + root.height); // Define the tree layout and the shape for links. const tree = d3.tree().nodeSize([dx, dy]); const diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x); // Create the SVG container, a layer for the links and a layer for the nodes. const svg = d3.create("svg") .attr("width", width) .attr("height", dx) .attr("viewBox", [-marginLeft, -marginTop, width, dx]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif; user-select: none;"); const gLink = svg.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); const gNode = svg.append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); function update(event, source) { const duration = event?.altKey ? 2500 : 250; // hold the alt key to slow down the transition const nodes = root.descendants().reverse(); const links = root.links(); // Compute the new tree layout. tree(root); let left = root; let right = root; root.eachBefore(node => { if (node.x < left.x) left = node; if (node.x > right.x) right = node; }); const height = right.x - left.x + marginTop + marginBottom; const transition = svg.transition() .duration(duration) .attr("height", height) .attr("viewBox", [-marginLeft, left.x - marginTop, width, height]) .tween("resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle")); // Update the nodes… const node = gNode.selectAll("g") .data(nodes, d => d.id); // Enter any new nodes at the parent's previous position. const nodeEnter = node.enter().append("g") .attr("transform", d => `translate(${source.y0},${source.x0})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0) .on("click", (event, d) => { d.children = d.children ? null : d._children; update(event, d); }); nodeEnter.append("circle") .attr("r", 2.5) .attr("fill", d => d._children ? "#555" : "#999") .attr("stroke-width", 10); nodeEnter.append("text") .attr("dy", "0.31em") .attr("x", d => d._children ? -6 : 6) .attr("text-anchor", d => d._children ? "end" : "start") .text(d => d.data.name) .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .attr("stroke", "white") .attr("paint-order", "stroke"); // Parse each related_item_info element and create a formatted string function formatRelatedItemInfo(infoList) { return infoList.map(info => { const parsedInfo = JSON.parse(info); return `

Item Path: ${parsedInfo.item_path}
Indent: ${parsedInfo.indent}
PNR: ${parsedInfo.pnr}
Keyword: ${parsedInfo.kwd}
ADT: ${parsedInfo.adt}
PFD: ${parsedInfo.pfd}
PLD: ${parsedInfo.pld}
Figure Title: ${parsedInfo.figure_title}

`; }).join(''); // Join all the formatted elements into one string } // Add a tooltip to show related_item_info on hover nodeEnter.on("mouseover", function(event, d) { const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background-color", "white") .style("border", "1px solid black") .style("padding", "8px") .style("border-radius", "5px") .style("font-family", "Arial, sans-serif") .style("font-size", "12px") .style("max-width", "300px") .style("overflow-y", "auto") .style("visibility", "hidden"); const relatedInfo = d.data.related_item_info; if (relatedInfo && relatedInfo.length > 0) { tooltip.html(formatRelatedItemInfo(relatedInfo)); } else { tooltip.text("No related item info available"); } tooltip.style("visibility", "visible") .style("top", `${event.pageY}px`) .style("left", `${event.pageX + 10}px`); }) .on("mousemove", function(event) { d3.select(".tooltip") .style("top", `${event.pageY}px`) .style("left", `${event.pageX + 10}px`); }) .on("mouseout", function() { d3.select(".tooltip").remove(); }); // Transition nodes to their new position. const nodeUpdate = node.merge(nodeEnter).transition(transition) .attr("transform", d => `translate(${d.y},${d.x})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); // Transition exiting nodes to the parent's new position. const nodeExit = node.exit().transition(transition).remove() .attr("transform", d => `translate(${source.y},${source.x})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // Update the links… const link = gLink.selectAll("path") .data(links, d => d.target.id); // Enter any new links at the parent's previous position. const linkEnter = link.enter().append("path") .attr("d", d => { const o = {x: source.x0, y: source.y0}; return diagonal({source: o, target: o}); }); // Transition links to their new position. link.merge(linkEnter).transition(transition) .attr("d", diagonal); // Transition exiting nodes to the parent's new position. link.exit().transition(transition).remove() .attr("d", d => { const o = {x: source.x, y: source.y}; return diagonal({source: o, target: o}); }); // Stash the old positions for transition. root.eachBefore(d => { d.x0 = d.x; d.y0 = d.y; }); } // Do the first update to the initial configuration of the tree — where a number of nodes // are open (arbitrarily selected as the root, plus nodes with 7 letters). root.x0 = dy / 2; root.y0 = 0; // root.descendants().forEach((d, i) => { // d.id = i; // d._children = d.children; // if (d.depth && d.data.name.length !== 7) d.children = null; // }); // Do not collapse nodes by setting children to null // root.descendants().forEach((d, i) => { // d.id = i; // d._children = null; // Ensure no collapsed nodes // d.children = d.children || d._children; // Expand all nodes by keeping children // }); // Initialize the tree: Expand all nodes under the subtree where the child of root starts with '21-', and collapse others root.descendants().forEach((d, i) => { d.id = i; if (d.depth === 1 && d.data.name.startsWith('21-')) { // If the child of root starts with '21-', expand this subtree d.descendants().forEach(node => { node._children = null; // mark all as expanded node.children = node.children || node._children; }); } else if (d.depth === 1) { // Collapse the subtree if it's a direct child of root and does not start with '21-' d.descendants().forEach(node => { if (node.depth > 1) { // Keep the first level under root as visible but collapsed node._children = node.children; node.children = null; } }); } }); update(null, root); return svg.node(); }