d3.js圈子悬停动画

时间:2014-10-22 15:54:46

标签: javascript jquery d3.js

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

我有一个简单的网络图here。我已经在圆圈上指定了鼠标悬停效果。因此,当您将鼠标悬停时,圆圈会突出显示“#39;通过增加其半径,将其乘以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);
}

当鼠标离开/离开时,它将它分开以使其恢复到原始半径。这样做的原因是因为圆半径对于所有人来说都不一样,它会有所不同。现在它可以正常工作,但是如果你没有等待动画完成并将鼠标移出并快速重新开启,那么圆圈会不断增加,当然反之亦然,如果你快速移动你的鼠标当它被带回原来的状态时,它变得很小。

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

1 个答案:

答案 0 :(得分:2)

创建节点时可以为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});
}