javascript - 删除 d3 工具提示 onclick
问题描述
我正在使用 d3 图表来显示散点图。我在点击时显示工具提示。如果单击页面上的任何位置,则必须删除工具提示。我应该如何删除工具提示?
var svg = d3.select("#scatter_plot")
.append("svg")
.attr("width", chart_width)
.attr("height", chart_height)
// create x_scale
var div = d3.select("body").append("div")
.attr("class", "tooltip1 scatter_tooltip")
.style("opacity", 0);
// add circles
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function (d) {
return x_scale(d.Staff_count)
})
.attr("cy", function (d) {
return y_scale(d.Outlets)
})
.attr("r", function (d) {
return a_scale(d.Total_Sales)
})
.attr("fill", function (d) { return scatter_color(d.Total_Sales) })
.on("click", function (d) {
var div_html = "<div class='d-flex justify-content-center m-2'><div class='font-weight-bolder pr-2'>"
var div_end = "<hr>" + "</div></div>" + div_html + "Total Sales" + ": " + d.Total_Sales + "</div></div>" + "</div></div>"+ div_html + "Outlets" + ": " + d.Outlets + "</div></div>" + "</div></div>"+ div_html + "Staff Count" + ": " + d.Staff_count
$(".tooltip1").show()
div.transition()
.duration(100)
.style("opacity", .9);
if (state_ == 'India') {
div.html(div_html + d.State + div_end + "</div></div>" + "<button class = 'myBtn btn btn-primary' id='" + d.State + "'>District Details >></button>")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
} else {
div.html(div_html + d.District + div_end)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
}
tooltip_load()
toolTipIsVisible()
})
如果有人对如何解决这个问题提出一些想法,那将会很有帮助。
解决方案
您可以作为全局单击事件处理程序监听正文或文档上的单击事件,在此处理程序中,您可以隐藏工具提示。在圆形点击事件处理程序中,您需要通过调用停止点击事件传播到正文或文档d3.event.stopPropagation()
。</p>
示例代码:
.attr("fill", function (d) { return scatter_color(d.Total_Sales) })
.on("click", function (d) {
var div_html = "<div class='d-flex justify-content-center m-2'><div class='font-weight-bolder pr-2'>"
var div_end = "<hr>" + "</div></div>" + div_html + "Total Sales" + ": " + d.Total_Sales + "</div></div>" + "</div></div>"+ div_html + "Outlets" + ": " + d.Outlets + "</div></div>" + "</div></div>"+ div_html + "Staff Count" + ": " + d.Staff_count
$(".tooltip1").show()
div.transition()
.duration(100)
.style("opacity", .9);
if (state_ == 'India') {
div.html(div_html + d.State + div_end + "</div></div>" + "<button class = 'myBtn btn btn-primary' id='" + d.State + "'>District Details >></button>")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
} else {
div.html(div_html + d.District + div_end)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
}
tooltip_load()
toolTipIsVisible()
// added code
d3.event.stopPropagation()
})
// global listener
d3.select('body').on('click', resetTooltip)
function resetTooltip() {
// reset tooltip state
div.style('opacity', 0)
$(".tooltip1").hide()
}
这里有一个例子:http: //bl.ocks.org/jasondavies/3186840
推荐阅读
- javascript - 在提交下一个突变之前处理 api 响应
- kaggle - 下载 Kaggle 输出文件
- javascript - 从 hrefs 创建文件夹和子文件夹
- xpath - IMPORTXML 查询返回多个单元格中的冗余数据
- assembly - 我正在制作 z80 pio 程序,但我发现 JRNZ 的代码有一些错误
- javascript - 如何在 Vue.js Header 中传递 api 密钥?我使用了 DRF 分页 url
- mongodb - (MongoDB 静态加密)除了检查日志文件之外,我如何验证加密是否正在发生?
- ckeditor5 - 在 Symfony5 中安装 CKeditor5
- javascript - 如何摆脱 React 中的 import/no-anonymous-default-export 警告?
- tkinter - 我没有得到按钮上图像的任何输出(tkinter)