d3.js圆形悬停动画

d3.js circle hover animation

本文关键字：悬停 动画 js d3      更新时间：2023-09-26

感谢您的光临。快速问题：

我这里有一个简单的网络图。我已经在圆圈上指定了鼠标悬停效果。因此，当你将其悬停时，通过增加其半径，将其乘以3，圆将被"高亮显示"。

 function mouseoverC() {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", d3.select(this).select("circle").attr("r") * 3);
}
function mouseoutC() {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", d3.select(this).select("circle").attr("r") / 3);
}

当鼠标离开时，它会将其分割，使其回到原来的半径。这样做的原因是，圆的半径不会对所有人都一样，而是会有所不同。现在，如果你做得很巧妙，它就可以工作了，但如果你不等到动画结束，就把鼠标拿出来，然后快速地重新放回原处，圆圈就会不断增加，当然反之亦然，如果你在鼠标恢复到原始状态时快速移动鼠标，它就会变小。

解决此问题的最佳方法是什么？

创建节点时，可以为init radius添加变量：

nodes = tasks.map(function(k){
  var entry;
  entry = {
    name: k,
      radius:10
  };
  if (map.get(k).fixed) {
    entry.fixed = true;
    entry.x = map.get(k).x;
    entry.y = map.get(k).y;
  }
  return entry;
});

然后你在鼠标上改变他的尺寸，如下所示：

function mouseoverC() {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", function(d){return d.radius*3});
}
//hover opposite, to bring back to its original state 
function mouseoutC() {
    d3.select(this).select("circle").transition()
        .duration(750)
    .attr("r", function(d){return d.radius});
}
相关文章：