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

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

当你这样做时：

.on('mouseover,tip.show)

等同于

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

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

1 个答案: