Fatal编程技术网
  • d3.js/
  • D3.js 获取元素的宽度

D3.js 获取元素的宽度

d3.js

D3.js 获取元素的宽度,d3.js,D3.js,我有一个演示 我有一个带有鼠标盖的堆叠面积图，上面显示了一个工具提示，其中包含该面积图的数据 我希望工具提示位于鼠标所在区域（高亮显示的矩形）顶部的中心 要使其居中，我需要工具提示的宽度 我正试着和你一起做这件事 .on('mouseover', function(d, i){ const tooltip = d3.select('.chart-tooltip').node(); const tooltipWidth = tooltip.getBoundingClientRec

我有一个演示

我有一个带有鼠标盖的堆叠面积图，上面显示了一个工具提示，其中包含该面积图的数据

我希望工具提示位于鼠标所在区域（高亮显示的矩形）顶部的中心

要使其居中，我需要工具提示的宽度

我正试着和你一起做这件事

 .on('mouseover', function(d, i){
    const tooltip = d3.select('.chart-tooltip').node();
    const tooltipWidth = tooltip.getBoundingClientRect();
    console.log(tooltipWidth)
但是console.log返回0

我认为这是因为没有显示工具提示

是否可以获取工具提示的宽度。

在设置div的
html
以及
显示：块之后，必须使用
getBoundingClientRect
：


tooltipDis.html(html)
    .style("display", 'block');

const tooltipWidth = tooltip.getBoundingClientRect();



下面是分叉代码：
为什么在图表中使用div而不是svg的text/tspan？在任何情况下，请尝试使用“可见性：隐藏”而不是“显示”：none@CoderinoJavarino如果使用OP
visibility:hidden
则div仍会占用页面空间，这不是一个好主意。这里惯用的方法是
display:none，和OP一样。@GerardoFurtado他用的是绝对值positioning@CoderinoJavarino是的，我知道。