[英]Making a scrollable tooltip in d3 pie chart
我在d3.js中使用d3pie。 当我将鼠标悬停在饼图上时,我会看到带有数据的工具提示,但是由于数据太长,其余数据被切除/隐藏了。
我想在单击饼图时显示一条可滚动的网关列表,就像工具提示一样。
这是我的代码。
var pie = new d3pie("gateway-datasources-status-chart", {
size: {
canvasHeight: 300,
canvasWidth: 300
},
data: {
content: [
{ label: "Online", value: online_gateway, lists: online_gateway_datasources },
{ label: "Offline", value: offline_gateway, lists: offline_gateway_datasources }
]
},
"tooltips": {
"enabled": true,
"type": "placeholder",
"string": "{label}: {lists}",
"styles": {
"backgroundColor": "#040404",
"borderRadius": 5
}
},
callbacks: {
}
});
我建议创建一个div,因为svg不允许滚动。 这是一个示例: http : //bl.ocks.org/d3noob/a22c42db65eb00d4e369
基本上添加一个div:
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
然后在鼠标悬停时,将div移动到鼠标所在的位置并更改div的文本:
.on("mouseover", function(d) {
div.transition()
.duration(200) //so it fades in
.style("opacity", .9);
div .html(formatTime(d.date) + "<br/>" + d.close)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500) //so it fades out
.style("opacity", 0);
});
要执行以下操作:
pieChart.on("click",function(d){
//show tooltip
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.