[英]D3 tooltip inside custom sparkline chart in an 'ag-grid' table cell not visible outside of table cell boundary
我有一个带有 d3 和 ag grid javascript grid libary ( https://www.ag-grid.com/ ) 的 angular.js 应用程序来生成一个工具提示,用于在表格内的瀑布图上提供点数据。
当我将鼠标悬停在特定图表上的较低点时,我会收到一个工具提示,但如果它超出表格单元格边界,则会被剪裁。
单元格/图表宽度高度为 300 像素 x 150 像素。
我尝试过的(部分成功):
<div tabindex="-1" unselectable="on" role="gridcell" comp-id="51" col-id="CloseTrends_1"
class="ag-cell ag-cell-not-inline-editing ag-cell-with-height ag-cell-value ag-cell-focus"
style="width:500px;left: 915px;">
宽度 500px 仅用于消除修改后的每个单元格的水平剪裁值,但当工具提示低于 y 轴上的单元格边界时,垂直部分剪裁仍然发生。
我想要的是:
无论工具提示在单元格图表上的位置如何,每个图表都会在单元格上方和整个单元格中显示工具提示。
overflow: visible
在 svg 元素上overflow: visible
,上述修改部分有帮助,但仍然产生不完整的解决方案
打开小提琴并向右滚动表格以查看图表。 用鼠标悬停观察效果。
您可以创建一个基于其激活位置出现的 html 工具提示。 这应该消除工具提示被切断的问题。
//function to append the tooltip; this is assuming only one tooltip will show at a time
appendTooltip() {
var target = document.getElementById("app");
var tooltip = d3.select(target).selectAll(".tool-tip");
if (tooltip.empty()) {
tooltip = d3.select(target).append("div")
.attr("class", "tool-tip")
.style("opacity", 0);
}
return tooltip
},
//function to show the tooltip
showTooltip(tooltip, d) {
tooltip.transition()
.duration(200)
.style("opacity", 0.8);
var html = `<div>date<div>${d.date}`
tooltip.html(html);
tooltip.style("left", (d3.event.pageX + 10) + "px)
tooltip.style("top", d3.event.pageY + "px")
},
//function to remove the tooltip
removeTooltip(tooltip) {
tooltip.transition()
.duration(100)
.style("opacity", 0);
}
您可以根据需要设置工具提示的样式。 如有必要,请确保添加适当的 z-index。
.tooltip {
fill: white;
stroke: #000;
opacity: 0.75;
}
// Append the tooptip when you first draw the d3 graph, and call the tooltip to add new HTML element on mouseover.
var tooltip = appendTooltip();
element.on("mouseover", d => showtooltip(tooltip, d);)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.