“ag-grid”表格單元格中的自定義迷你圖內的 D3 工具提示在表格單元格邊界之外不可見

Question

我有一個帶有 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 ，上述修改部分有幫助，但仍然產生不完整的解決方案

打開小提琴並向右滾動表格以查看圖表。 用鼠標懸停觀察效果。

https://next.plnkr.co/edit/6m3EoZ2RN1bWMOiP?preview

Answer 1

您可以創建一個基於其激活位置出現的 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);)