javascript - 使用 d3.tip 添加鼠标悬停效果

Question

有没有办法用 d3.tip 添加鼠标悬停效果

假设我有这个

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 的工具提示，如下所示 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)
            });

更新了 fiddle :https://jsfiddle.net/reko91/qc2m52zf/5/

当你这样做时:

.on('mouseover,tip.show)

相当于

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