2a:null 2b:["$","title",null,{"children":"Tooltip | Néstor Andrés Peña | Observable"}] 30:T457,plantillaTooltip = { return html`

` }31:[] 2e:{"id":"38053357515cd2fc","slug":"tooltip","title":"Tooltip","thumbnail":"2ec0d35f0c7c9a0a42ed9f490c2aa99e48cd454a561b91f30ce7839baf2e8e1c","access_level":"public","create_time":"$D2022-03-26T18:56:07.304Z","update_time":"$D2023-01-15T21:24:01.502Z","view_time":null,"first_public_time":"$D2022-03-26T19:51:25.564Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"01062053fabb03ae","login":"nestorandrespe","name":"Néstor Andrés Peña","avatar_url":"https://avatars-next.observableusercontent.com/d99a6c701ad1b2e42bbbc506b9ebf12e4a4fc10974ce5750f7fed982e443fd07","tier":"starter_2024"},"version":160,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6a42999b55e39bcd","login":"nestorandrespe","name":"Néstor Andrés Peña","avatar_url":"https://avatars-next.observableusercontent.com/d99a6c701ad1b2e42bbbc506b9ebf12e4a4fc10974ce5750f7fed982e443fd07","tier":null}],"members":[{"type":"individual","id":"6a42999b55e39bcd","login":"nestorandrespe","name":"Néstor Andrés Peña","avatar_url":"https://avatars-next.observableusercontent.com/d99a6c701ad1b2e42bbbc506b9ebf12e4a4fc10974ce5750f7fed982e443fd07","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"1c444ae055dbdfdc","slug":"herramientas","title":"Herramientas","owner":{"id":"01062053fabb03ae","login":"nestorandrespe","name":"Néstor Andrés Peña"}},"type":"notebook","body":{"title":"Tooltip","cells":[{"id":0,"value":"# Tooltip","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"chart = {\n const container = d3.select(\n html`

${plantillaTooltip}

`\n );\n\n const tooltipDiv = container.select(`#${tooltipId}`)\n\n const svg = container.append(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", 400)\n .attr('viewBox', `0 0 ${width} ${400}`)\n\n svg.append('circle')\n .attr('r', 20)\n .attr('cx', width/2)\n .attr('cy', 100)\n .call(tooltip, tooltipDiv, container)\n\n return Object.assign(container.node());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"tooltipId = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"tooltip = (selectionGroup, tooltipDiv, containerDiv) => {\n selectionGroup.each(function () {\n d3.select(this)\n .on(\"mouseout\", handleMouseover)\n .on(\"mousemove\", handleMousemove)\n\n function handleMouseover(){\n tooltipDiv.style(\"display\", \"none\")\n }\n\n function handleMousemove(event, d){\n const w = containerDiv.node().getBoundingClientRect().width\n\n if(event.layerX > w / 2){\n tooltipDiv\n .style(\"left\", event.layerX + 20 + \"px\")\n .style(\"top\", event.layerY + \"px\")\n .style(\"display\", \"block\")\n .style(\"transform\", \"translate(calc(-100% - 60px), 0px)\")\n .call(updateContent, d)\n }\n else {\n tooltipDiv\n .style(\"left\", event.layerX + 20 + \"px\")\n .style(\"top\", event.layerY + \"px\")\n .style(\"display\", \"block\")\n .style(\"transform\", \"translate(0px, 0px)\")\n .call(updateContent, d)\n }\n \n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"updateContent = (selectionGroup, d) => {\n selectionGroup.each(function () {\n const tooltip = d3.select(this);\n\n console.log(d);\n\n tooltip.select(\"h5\").html(\"Test\");\n\n tooltip.select(\"p\").html(\"contenido\");\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"