当工具提示 css-transitions 在鼠标上时，如何停止图形上的 mouseleave 回调？

编程问答 2022-05-27

问题描述

我正在使用 D3 创建一个饼图，并且，为了效果，当鼠标进入和离开楔形时，我正在转换工具提示。这里的缺陷是工具提示在饼图上移动并触发楔形鼠标离开回调（将工具提示可见性设置为隐藏）。我在工具提示中添加了相同的回调（以便它出现在 mouseenter 和 mouseleave 的隐藏上），这可以处理任何问题，除了随着工具提示在图形上呼啸而出的轻微滞后。有没有办法完全消除这种滞后？如果我可以使用“on.mouseleave if not tooltip.mouseenter then callback”这样的条件，那就太好了，但我不知道有什么方法可以在回调中添加 if 条件。

这是饼图和工具提示的代码。

let g = d3.select('.socPie .graph-display')
    .selectAll('.arc')
    .data(pie(records))
    .enter()
  .append('g')
    .style('transform',`translate(${graphWidth / 2}px,${radius}px)`)
  .append('path')
    .attr('d',arc)
    .attr('fill',d => colourScale(d.data.obj))
    .on('mouseenter',d => {
      let tooltip = d3.select('.socPie .graph-display .tooltipSocPie')
      if (!tooltip.node()) {
        tooltip = d3.select('.socPie .graph-display')
          .append('g')
            .attr('class','tooltipSocPie')
            .style('transform',${radius}px)`)
            .on('mouseenter',() => {
              d3.select('.tooltipSocPie')
                  .style('visibility','visible')
            })
            .on('mouseleave','hidden')
            })
      } else {
        tooltip.style('visibility','visible')
      }

      let textMeta = createSocPietooltext(tooltip,'tooltext');
      let toolpath = createSocPietoolpath(tooltip,'toolpath');
      nodetoTop('.tooltipSocPie','.tooltipSocPie .tooltext')
    })
    .on('mouseleave',() => {
      d3.select('.tooltipSocPie')
          .style('visibility','hidden')
    })

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-transitionsjavascriptmouseleavetooltiptooltiptooltip