Jquery 半圈饼图或半饼图的工具提示
在堆栈上找到此链接。我们能否将工具提示添加到半饼图/半甜甜圈图中:Jquery 半圈饼图或半饼图的工具提示,jquery,d3.js,jquery-tooltip,Jquery,D3.js,Jquery Tooltip,在堆栈上找到此链接。我们能否将工具提示添加到半饼图/半甜甜圈图中: 下面是一个向图表中添加div工具提示的示例 // create div add to DOM var div = d3.select("body").append("div") .style("position", "absolute") .style("width", "60px") .style("height", "18px") .style("background", "lights
下面是一个向图表中添加
div
工具提示的示例
// create div add to DOM
var div = d3.select("body").append("div")
.style("position", "absolute")
.style("width", "60px")
.style("height", "18px")
.style("background", "lightsteelblue")
.style("border-radius","4px")
.style("opacity", 0);
.....
// after you append the "arcs"
// set up some mouse handler to show/hide div
arcs.append("svg:path")
.attr("fill", function(d, i) { return color(i); } )
.attr("d", arc)
.on("mousemove", function(d) {
div.transition()
.duration(200)
.style("opacity", 0.9);
div.html("Seats: " + d.value)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
参见示例