d3.js圆圈悬停动画

Neil Varnas 发表于 Dev

尼尔·瓦尔纳斯

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

我这里有一个简单的网络图。我已将鼠标悬停在圆圈上的效果上。因此，当您将鼠标悬停时，可以通过增大半径，乘以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);
}

当鼠标移出/移开时，它将对其进行划分，以使其回到其原始半径。这样做的原因是因为圆半径不会全部相同，而是会不同。现在，如果您整齐地进行操作就可以了，但是如果您不等待动画完成并取出鼠标并迅速将其放回原处，则圆圈会不断增加，当然，如果您在鼠标移开时快速将其移到上方，则反之亦然回到原始状态后，它的晚餐变得很小。

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

马修

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。