Plotly.js，在图表容器外显示工具提示

Question

我需要在宽度非常有限的页面上实现 plotly.js 图表。结果，工具提示被部分剪切。是否有可能导致工具提示不受 plotly.js 容器大小的限制？

我在 codepen 的代码示例：https://codepen.io/anatoly314/pen/gOavXzZ?editors=1111

//my single trace defined as following but it's better to see example at codepen
const yValue1 = [1000];
const trace1 = {
        x: [1],
        y: yValue1,
        name: `Model 1`,
        text: yValue1.map(value => Math.abs(value)),
        type: 'bar',
        textposition: 'outside'
      };

Answer 1

根据设计，图表的任何部分都不可能溢出其容器。

Answer 2

我要说的是，按设计这是不可能的是错误的！这有点 hacky，但是当您添加以下行时，它会在 svg 之外显示标签：

svg.main-svg,svg.main-svg *
{
  overflow:visible !important;
}

Answer 3

rokdd 给出的答案有效。但是 css 选择器应该更具体，否则很自然会引入细微的错误（特别是如果您需要滚动包含 plotly 图表的内容）。

如果我们查看由 Plotly 构建的 DOM 树，我们会发现工具提示是在 <g class="hoverlayer"></g> 元素（它是三个 <svg class="main-svg"></svg>).因此，父项（svg.main-svg 元素）只是需要受影响的一个。

在这种情况下，理想的 css 选择器是 :has 选择器。但是它仍然不受支持（截至 2022 年）：https://css-tricks.com/the-css-has-selector/

所以下一个最简单的事情就是在我们调用 Plotly.newPlot:

之后立即使用一点 javascript

// get the correct svg element
var mainSvgEl = document.querySelector('#positive g.hoverlayer').parentElement;
mainSvgEl.style['overflow'] = 'visible';

或者以更通用的方式（适用于任何图表）：

Array.from(document.querySelectorAll('g.hoverlayer')).forEach(hoverEl => {
  let mainSvgEl = hoverEl.parentElement;
  mainSvgEl.style['overflow'] = 'visible';
});

Plotly.js，在图表容器外显示工具提示

Plotly.js, show tooltips outside of chart container

d3.js

plotly

plotly.js