與d3.tip添加鼠標懸停效果

Question

有沒有一種方法，以添加d3.tip

假設我一個mousover效果有這個

var tip = d3.tip() 
    .attr("class", "d3-tip") 
    .html(function(d) { 
     return d.properties.xy 
    }); 


svg.call(tip); 
var feature = g.selectAll("circle") 
     .data(data.features) 
     .enter() 
     .append("circle") 
     .attr("r", function (d) { 
      d.properties.xy 
     }) 
     .style("fill", "red") 
     .attr("fill-opacity", 0.5) 
     .on("mouseover", tip.show) 
     .on("mouseout", tip.hide); 

這讓我通過d3.tip提示。但是，如果我想要一些效果，像這個鼠標懸停怎麼辦？

feature.on("mouseover",function(d) { 
     d3.select(this) 
     .transition() 
     .ease("elastic") 
     .duration(500) 
     .attr('r', function (d){ 
      return (10 * d.properties.xy) 
     }) 
     .style("stroke", "black") 
     .style("stroke-width", 2) 
    }); 

有沒有辦法將這兩種方法結合起來？

查看JSfiddle 這裏缺少的是d3.tip在mouseover上的工具提示，就像這個example一樣！

Answer 1

問題是因爲提示不知道顯示哪個元素。因此，而不是：

tip.show 

傳遞給它的元素，你希望顯示：

tip.show(d) 

所以你的函數如下所示：

feature.on("mouseover",function(d) { 
      d3.select(this) 
      .transition() 
      .ease("elastic") 
      .duration(1000) 
      .attr('r', function(d) { 
      return (d.value * 5) 
      }) 
      .style("stroke", "green") 
      .style("stroke-width", 2) 
      .style("fill", "red") 
      tip.show(d) 
      }); 

更新小提琴：https://jsfiddle.net/reko91/qc2m52zf/5/

當你這樣做：

.on('mouseover,tip.show) 

其相當於

.on('mouseover',function(d){ tip.show(d)});