31:T67e,tooltip = (selectionGroup, tooltipDiv) => { selectionGroup.each(function () { d3.select(this) .on("mouseover.tooltip", handleMouseover) .on("mousemove.tooltip", handleMousemove) .on("mouseleave.tooltip", handleMouseleave); }); function handleMouseover() { // show/reveal the tooltip, set its contents, // style the element being hovered on showTooltip(); setContents(d3.select(this).datum(), tooltipDiv); setStyle(d3.select(this)); } function handleMousemove(event) { // update the tooltip's position const [mouseX, mouseY] = d3.pointer(event, this); // add the left & top margin values to account for the SVG g element transform setPosition(mouseX + margin.left, mouseY + margin.top); } function handleMouseleave() { // do things like hide the tooltip // reset the style of the element being hovered on hideTooltip(); resetStyle(d3.select(this)); } function showTooltip() { tooltipDiv.style("display", "block"); } function hideTooltip() { tooltipDiv.style("display", "none"); } function setPosition(mouseX, mouseY) { tooltipDiv .style( "top", mouseY < height / 2 ? `${mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "right", mouseX > width / 2 ? `${width - mouseX + MOUSE_POS_OFFSET}px` : "initial" ) .style( "bottom", mouseY > height / 2 ? `${height - mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "left", mouseX < width / 2 ? `${mouseX + MOUSE_POS_OFFSET}px` : "initial" ); } }32:[] 2f:{"title":"Tooltip (D3 Convention)","cells":[{"id":0,"value":"md`# Tooltip (D3 Convention)\n\nThis version of a Tooltip uses the D3JS convention of [\\`selection.call()\\`](https://github.com/d3/d3-selection#selection_call) to register the Tooltip's behavior. This is an improvement on my original version of a [Tooltip Component](https://observablehq.com/@clhenrick/tooltip-component).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"demo = {\n const container = d3.select(\n html`

${tooltipTemplate}

`\n );\n\n const tooltipDiv = container.select(\".tooltip\");\n\n const svg = container.append(\"svg\").attr(\"viewBox\", `0 0 ${width} ${height}`);\n\n svg\n .append(\"g\")\n .attr(\"transform\", `translate(${margin.left}, ${margin.top})`)\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .attr(\"r\", 5)\n .attr(\"fill\", \"#333\")\n .call(tooltip, tooltipDiv);\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"tooltipId = DOM.uid().id","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"tooltipTemplate = html`

\n ${tooltipStyles}\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"Feel free to override these helper functions and constants to your liking.","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"function setContents(datum, tooltipDiv) {\n // customize this function to set the tooltip's contents however you see fit\n tooltipDiv\n .selectAll(\"p\")\n .data(Object.entries(datum))\n .join(\"p\")\n .filter(([key, value]) => value !== null && value !== undefined)\n .html(\n ([key, value]) =>\n `${key}: ${\n typeof value === \"object\" ? value.toLocaleString(\"en-US\") : value\n }`\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"function resetStyle(selection) {\n selection.attr(\"fill\", \"#333\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"function setStyle(selection) {\n selection.attr(\"fill\", \"magenta\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"tooltipStyles = htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"// padding between the tooltip and mouse cursor\nMOUSE_POS_OFFSET = 8","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"md`## Chart Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"margin = ({ top: 10, right: 10, bottom: 10, left: 10 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"data = new Array(50).fill(undefined).map((d, i) => ({\n x: Math.floor(Math.random() * (width - margin.left - margin.right)),\n y: Math.floor(Math.random() * (height - margin.top - margin.bottom)),\n id: i\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3-selection@2\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}