d3.js 圆形悬停动画

Question

感谢您的光临。简单问题：

我有一个简单的网络图表，在这里。我已经为圆圈分配了鼠标悬停效果。所以当你将鼠标悬停在它上面时，圆圈会通过将其半径乘以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);
}

当鼠标离开时，它会将其分裂以使其恢复到原始半径。这样做的原因是因为圆的半径对于所有人来说不同。现在，如果您整洁地执行此操作，则可以正常工作，但是如果有人不等待动画完成并将鼠标移出并迅速将其放回，则圆将不断增加，当然反之亦然，如果您在其被带回到原始状态时迅速将鼠标移到其上方，则变得超级小。

如何解决这个问题？

- nlv

---

你需要在初始化时获取并存储每个圆的半径，然后在滑过时获取存储的半径（而不是当前半径），并将其乘以3，在滑出时执行相同的操作，但除以3。 - r8n5n

啊，好的，我在想创建一个自定义属性，当圆形被创建时将原始半径存储在那里。只是想看看是否有更有效的方法来做到这一点。谢谢。 - nlv

为什么不设置一个固定的数字？或者你在其他地方有不同的圆圈大小吗？ - kwoxer

每个圆的大小都不同。 - nlv

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

- Matthieu

---

太棒了。干杯，伙计。 - nlv

也许您可以看一下这个链接（http://stackoverflow.com/questions/26495048/manipulating-d3-network-diagram）的问题，因为您对d3.js有很好的了解。 - nlv