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

oymdgrw7  于 2022-11-12  发布在  其他
关注(0)|答案(3)|浏览(149)

我需要在一个宽度非常有限的页面上实现一个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'
      };
kyvafyod

kyvafyod1#

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

5ktev3wc

5ktev3wc2#

我会说,这是错误的说,通过设计这是不可能的!这是一个有点hacky,但当你添加以下行,它显示的标签以外的svg:

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

zpf6vheq3#

rokdd给出的答案是可行的,但是css选择器应该更具体,否则很自然会引入一些细微的bug(特别是当你需要滚动包含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';
});

相关问题