41:null 42:["$","title",null,{"children":"Force-Directed Graph - Tooltip using HTML | Roland | Observable"}] 48:Tc1c,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(); }49:[] 46:{"id":"a4eab4fa63101ce1","slug":"force-directed-graph-integrated-html","title":"Force-Directed Graph - Tooltip using HTML","thumbnail":"29dc500d1dd2b15a67e7aeccf35641e30c60af8d617dbb694bca5e28ee9f6722","access_level":"public","create_time":"$D2019-06-27T00:58:59.098Z","update_time":"$D2019-06-28T16:01:08.994Z","view_time":null,"first_public_time":"$D2019-06-28T05:58:54.317Z","has_unpublished_edits":null,"fork":{"id":"a6c00de7c09bdfa1","slug":"force-directed-graph-component","title":"Force-directed graph component","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":4,"starred":false,"owner":{"type":"team","id":"95f83fe87b5cbeeb","login":"skofgar","name":"Roland","avatar_url":"https://avatars-next.observableusercontent.com/e5b7716654c15bf0c2102baba9d1012f3139e0c1a356ae53998fc5cb8e92368b","tier":"starter_2024","bio":"Software Engineer, Dogs, Photography\r\n\r\nhttps://gitlab.com/skofgar","following":false},"version":365,"publish_version":365,"role":null,"authored":false,"authors":[{"type":"individual","id":"03c688fcde771af4","login":"skofgar","name":"Roland","avatar_url":"https://avatars-next.observableusercontent.com/e5b7716654c15bf0c2102baba9d1012f3139e0c1a356ae53998fc5cb8e92368b","tier":null,"bio":"Software Engineer, Dogs, Photography\r\n\r\nhttps://gitlab.com/skofgar","following":false}],"members":[{"type":"individual","id":"03c688fcde771af4","login":"skofgar","name":"Roland","avatar_url":"https://avatars-next.observableusercontent.com/e5b7716654c15bf0c2102baba9d1012f3139e0c1a356ae53998fc5cb8e92368b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Force-Directed Graph - Tooltip using HTML","cells":[{"id":1,"value":"md`# Force-Directed Graph - Tooltip using HTML \n\nThis is a simple network using the [d3-force](https://github.com/d3/d3-force). See also a [disconnected graph](/@mbostock/disjoint-force-directed-graph) layout and adding an html tooltip based on [Employees Hierarchy Chart using d3.js](https://bl.ocks.org/willzjc/a11626a31c65ba5d319fcf8b8870f281).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = ({ \n nodes: [{id: \"Step 1\", group: 1}\n , {id: \"Step 2\", group: 1}\n , {id: \"Step 3\", group: 1}\n , {id: \"Step 4\", group: 1}\n , {id: \"Step 5\", group: 1}\n , {id: \"Step 6\", group: 1}\n ], \n links: [\n {source: \"Step 1\", target: \"Step 2\", value: 1}\n ,{source: \"Step 1\", target: \"Step 3\", value: 1}\n ,{source: \"Step 3\", target: \"Step 4\", value: 1}\n ,{source: \"Step 2\", target: \"Step 4\", value: 1}\n ,{source: \"Step 4\", target: \"Step 5\", value: 1}\n ,{source: \"Step 1\", target: \"Step 6\", value: 1}\n ,{source: \"Step 4\", target: \"Step 6\", value: 1}\n ]\n})\n//d3.json(\"https://gist.githubusercontent.com/mbostock/4062045/raw/5916d145c8c048a6e3086915a6be464467391c62/miserables.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.group);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"drag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n \n // setting the fx values will \"pin\" the nodes to this position\n d.fx = d.x; \n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n \n // if these are null, the simulation will relocate them\n // d.fx = null; \n // d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"md`# Sources:\n\n- [Can't we all get along?](http://bl.ocks.org/sxv/4491174)\n- [Employees Hierarchy Chart using d3.js](https://bl.ocks.org/willzjc/a11626a31c65ba5d319fcf8b8870f281)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 47:"$46:body"