标签：javascript d3-js tooltip transition

我是d3和编码的新手,我正在制作带有一些工具提示的社交网络图.当有人在节点上盘旋时,工具提示应该出现,当鼠标移除时淡出并隐藏.我设法通过转换获得提示淡出,但提示实际上仍然存在,只是不可见,因此框和文本有时会遮盖其他节点,使得您无法成功地将鼠标悬停在其他节点的部分上触发其他工具提示.当代码只是node.on(‘mouseout’,tip.hide);时,它工作正常,但它没有转换.

这是小提琴.我正在谈论的效果并不像普通的浏览器那样发生. http://jsfiddle.net/wPLB5/

      node.on('mouseover', tip.show); 
      node.on('mouseout', function() { 
          d3.select(".d3-tip")
          .transition()
          .delay(100)
          .duration(500)
          .style("opacity",0);
          tip.hide;
         }); 
      //node.on('mouseout', tip.hide); //This is the original line.

编辑：

我想到了.我需要添加另一种我不知道的风格.这是固定代码：

  node.on('mouseout', function() {
      d3.select(".d3-tip")
      .transition()
        .delay(100)
        .duration(600)
        .style("opacity",0)
        .style('pointer-events', 'none')
      });

解决方法:

我想到了.我需要添加指针事件样式.这是固定代码：

  node.on('mouseout', function() {
      d3.select(".d3-tip")
      .transition()
        .delay(100)
        .duration(600)
        .style("opacity",0)
        .style('pointer-events', 'none')
      });

标签：javascript,d3-js,tooltip,transition
来源： https://codeday.me/bug/20190830/1770020.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。