d3.js 圆形悬停动画

Question

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

我有一个简单的网络图here。我已经在圆圈上分配了鼠标悬停效果。因此，当您将其悬停时，圆圈会通过增加其半径并将其乘以 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);
}

当鼠标离开/离开时，它会将它分开以使其回到原来的半径。这样做的原因是因为圆的半径不会对所有人都一样，它会有所不同。现在，如果您巧妙地完成它，它就可以工作，但是如果您不等待动画完成并取出鼠标并迅速将其重新放回原处，则圆圈会不断增加，当然反之亦然，如果您在它的时候快速移动鼠标回到原来的状态，它变得非常小。

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

Answer 1

您可以在创建节点时为初始化半径添加变量：

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