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

Answer 2

您可以使用div工具提示或使用svg title嘗試這兩種方法。

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

此外，也許這個答案對你有用D3：顯示圓圈鼠標懸停的數據 。