在d3中隐藏具有转换的工具提示

Question

我是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')
      });

Answer 1

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

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