[英]Tooltip in d3 js (Bullet charts)
d3.json("data.json", function(error, data) {
if (error) throw error;
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var svg = d3.select("body").selectAll("svg")
.data(data)
.enter().append("svg")
.attr("class", "bullet")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom).on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html("Tooltip" + "<br/>" + d.measures);
})
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(chart);
我的代碼中是否有任何錯誤,還是我需要做不同的事情。
您必須在鼠標懸停時更新工具提示div的位置。
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9)
.style("left", (d3.event.pageX) + "px") //Set X
.style("top", (d3.event.pageY) + "px"); //Set Y
div.html("Tooltip" + "<br/>" + d.measures);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.