React D3 多个圆环图工具提示未显示

Question

我有两个圆环图，但是当我将鼠标悬停在左侧图表的圆弧上时，我只能显示工具提示。未显示右侧图表工具提示（超出屏幕宽度）。如何使工具提示准确显示在我的鼠标所在的位置。

CodeSandbox

我的方法是：

 .on("mouseover", (d) => {
        setTooltipPosition({
          x: d.clientX - 280,
          y: d.pageY - 10
        });
        setIsTooltipEnabled(true);
      })
      .on("mouseout", (d) => {
        setIsTooltipEnabled(false);
      });

然后渲染它：

return (
    <DoughnutChartContainer width={width} height={height}>
      <svg
        ref={svgRef}
        width={width}
        height={height}
        textLength="5px"
        preserveAspectRatio="xMidYMid meet"
      ></svg>
      {isTooltipEnabled && (
        <Tooltip position={tooltipPosition}>
          <TooltipText dotColor="#4FD8DD" textColor="white">
           some text
          </TooltipText>
        </Tooltip>
      )}
    </DoughnutChartContainer>
  );