En este codepen , hacer clic en un nodo hace que aparezca una ventana emergente. Eventualmente, quiero que los enlaces y las cosas en las que se puede hacer clic estén en la ventana emergente. El problema es que, en este momento, cuando haces clic en él, se cierra la ventana emergente.
Estoy usando un evento onclick, así que cuando haces clic en cualquier lugar (cuerpo HTML), la ventana emergente se cierra. Prefiero esto a decir un botón de cierre "x" en la ventana emergente, pero no sé cómo quitar la ventana emergente en este evento de clic para cerrar.
d3.select("body").on("click", function() { console.log("click on body") tooltip.style("opacity", 0) tooltip.style("visibility", "hidden") })Pensé que tal vez el evento d3 stopPropagation en la "información sobre herramientas" de alguna manera entraría en juego aquí, pero no estoy seguro.
¡Gracias por cualquier ayuda!
La forma en que la mayoría de los sitios web manejan esto es agregando una ventana emergente y una superposición de fondo, y luego solo registrando los clics en la superposición de fondo.
Por ejemplo:
d3.select("circle") .on("click", clickNode); var tooltipBg = d3 .select(".tooltip-overlay") .on("click", clickBackground); var tooltip = d3.select(".tooltip"); function clickNode(event) { const [x, y] = d3.pointer(event); tooltipBg.style("display", "block"); tooltip .style("left", `${event.layerX}px`) .style("top", `${event.layerY}px`) .style("display", "block") .transition() .duration(300) .style("opacity", 1); } function clickBackground() { tooltipBg.style("display", "none"); tooltip .transition() .duration(300) .style("opacity", 0) .on("end", () => tooltip.style("display", "none")); } .tooltip-overlay { position: absolute; width: 100vw; height: 100vh; top: 0; left: 0; opacity: 0; display: none; } .tooltip { position: absolute; padding: 12px; z-index: 10; border: solid 2px red; width: 200px; height: 100px; background-color: white; border-radius: 5px; box-shadow: 6px solid #eee; opacity: 0; display: none; } <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script> <svg height="500" width="500"> <circle r="20" cy="50" cx="50"></circle> </svg> <div class="tooltip-overlay"></div> <div class="tooltip"></div>