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

Answer 2

您可以尝试两种方法using div tooltip或using svg title。

 node.append("svg:title")
   .text(function(d) { return "Location:" + " " + d.location + 
      "\nFloruit Date:" + " " + d.floruitDate; });

此外，也许这个答案对你有用D3: show data on mouseover of circle。

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

2 个答案: