在這個 codepen 中，點擊一個節點會導致一個彈出框出現。最終，我希望鏈接和可點擊的東西出現在彈出視窗中。問題是，現在當您單擊它時，彈出視窗會關閉。
我正在使用 onclick 事件，因此當您單擊任意位置（HTML 正文）時，彈出視窗將關閉。我更喜歡說彈出視窗中的“x”關閉按鈕，但我不知道如何在此單擊以關閉事件中取消包含彈出視窗。
d3.select("body").on("click", function() {
console.log("click on body")
tooltip.style("opacity", 0)
tooltip.style("visibility", "hidden")
})
我想也許“工具提示”上的 d3 stopPropagation 事件會以某種方式在這里發揮作用，但我不確定。
謝謝你的幫助！
uj5u.com熱心網友回復：
大多數網站處理此問題的方式是同時添加彈出視窗和背景覆寫，然后僅將點擊注冊到背景覆寫。
例如：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/382613.html
標籤：javascript d3.js 点击 弹出框
上一篇：僅限客戶端的Nuxt3D3插件