Javascript d3.js循环悬停动画

谢谢你过来。快速问题：

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

---

您需要在开始时获取并存储每个圆的半径，然后在滚动时获取存储的半径（而不是当前半径）并将其乘以3，在滚动时执行相同的操作，但/乘以3Ah，好的，我正在考虑在创建圆时创建一个自定义属性并将原始半径存储在那里。我只是想看看有没有更有效的方法。谢谢你为什么不定一个固定的号码呢？或者你在什么地方有不同的圆圈大小？每个圆圈的大小都不一样。干杯，伙计，也许你也可以看看这个问题，因为你对d3.js有一个好主意