使用 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)});

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

Adding mouseover effects with d3.tip

javascript

dom

d3.js

mouseover