chart = { const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); // keep track of if tooltip is hidden or not var isTooltipHidden = true; const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)); const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", 9) .attr("fill", color) .call(drag(simulation)) .on("click", clickNode) ; function clickNode(node) { // update visibility isTooltipHidden = !isTooltipHidden; var visibility = (isTooltipHidden) ? "hidden" : "visible"; // load tooltip content (if it changes based on node) loadTooltipContent(node); if (isTooltipHidden) { unPinNode(node); } // place tooltip where cursor was return tooltip.style("top", (d3.event.pageY -10) + "px").style("left", (d3.event.pageX + 10) + "px").style("visibility", visibility); } // reset nodes to not be pinned function unPinNode(node) { node.fx = null; node.fy = null; } // add html content to tooltip function loadTooltipContent(node) { var htmlContent = "

"; htmlContent += "

Example tooltip for " + node.id + "<\/h4>" htmlContent += "
" htmlContent += "First name:
" htmlContent += "" htmlContent += "
" htmlContent += "Last name:
" htmlContent += "" htmlContent += "

" htmlContent += "" htmlContent += "<\/form>" htmlContent += "<\/div>" tooltip.html(htmlContent); } // add tooltip to HTML body var tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("padding", "10px") .style("z-index", "10") .style("width", "300px") .style("height", "200px") .style("background-color", "rgba(230, 242, 255, 0.8)") .style("border-radius", "5px") .style("visibility", "hidden") .text(""); node.append("title") .text(d => d.id); simulation.on("tick", () => { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("cx", d => d.x) .attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }