Question

我这里有一个stackBlitz-https://stackblitz.com/edit/ng-tootltip?file=src/app/bar-chart.ts

当您将鼠标悬停在条形图上时，我会有一个带有工具提示的条形图。

工具提示位于条形上方，但是在小屏幕尺寸下，我希望将工具提示放置在窗口的中间。

我可以在屏幕很小的情况下进行捕获，并且我也具有工具提示的宽度，因此我认为我需要将其定位的一半宽度。我只是将如何使用它放在style属性中。

if (window.innerWidth < 500) {
    const toolTipWidth = d3.select('.chart-tooltip').style('width');
    const halfToolTipWidth = Number(toolTipWidth)/2;

    d3.select('.chart-tooltip')
        .style("left", 50 + "%") <- I need to minus the half width here
        .style("top", 0 + "px")
        .html(html)
}else{
    d3.select('.chart-tooltip')
        .style("left", d3.event.pageX - 30 + "px")
        .style("top", 0 + "px")
        .html(html)
}

Answer 1

您正在寻找的是CSS3 calc function。您可以使用它来编写类似calc(50% - 10px)的值（运算符必须由空格包围）。

此操作，再加上对halfToolTipWidth计算的修正，该修正为NaN提供了条件，您就完成了：

编辑：toolTipWidth也已修复。

let tooltip = d3.select('.chart-tooltip');

if (window.innerWidth < 500) {

  const toolTipWidth = tooltip.node().getBoundingClientRect().width;
  const halfToolTipWidth = 40;

  tooltip
    .style("position", "absolute")
    .style("left", "calc(50% - " + halfToolTipWidth +"px)")
    .style("top", 0 + "px")
    .html(html)
} else {
  tooltip
    .style("left", d3.event.pageX - 30 + "px")
    .style("top", 0 + "px")
    .html(html)
}

Updated Stackblitz。

屏幕较小时的D3位置工具提示

1 个答案: