Javascript D3/GraphGL力导向网络可视化的放大镜效应？

当使用

D3

或

GraphGL

库在力导向图形可视化中悬停在节点上时，是否可以创建平滑的动画放大效果（类似于Mac OS X上的dock）

节点需要展开并置换周围的其他节点，同时保持力导向布局

如果有人能证明，那就太好了！谢谢

---

注意，这与简单的缩放不同，如在

中，如果您接受纯css，它可以做到这一点

.app{
-webkit-transition-property:-webkit-transform;
-moz-transition-property:-moz-transform;
-transition-property:-transform;
-webkit-transition-duration:.15s;
-moz-transition-duration:.15s;
-transition-duration:.15s;
}

.app:hover{
-webkit-transform:scaleX(1.2) scaleY(1.2);
-moz-transform:scaleX(1.2) scaleY(1.2);
-transform:scaleX(1.2) scaleY(1.2);
}

---

它被用在我的主页上

如果你能用纯CSS来实现这一点，那将是令人惊讶的，但不幸的是，各种SVG元素（即，圆圈）的属性似乎无法通过CSS访问。特别是“radius”，但我认为这对于大量SVG元素属性都是正确的

但通过d3实现这一点并不是很难。这是。基本上，您可以执行以下操作：

使用转换（请参阅以了解如何使用这些转换）。基本上做一个

d3element.transition（）.delay（300）.attr（…）

来进行更改

为了防止“放大”的圆圈重叠，我能想到的最好办法就是修改设置。当圆变大时，增加排斥力

---

希望这就是你想要的…

好问题。为了回答这个问题，我实现了一个for。它大致基于Flare和Sigma.js中以前的工作，后者又基于Sarkar和Brown的工作，CHI'92

下面是一个关于Misérables数据集的示例。查看代码的源代码。今天晚些时候我有时间写一篇文章

---

注：这使用静态力布局；布局是在启动时计算的，不会更改。我认为这可能是你想要结合鱼眼扭曲，否则扭曲将与你的能力竞争，移动节点的动态。但从理论上讲，如果你想要的话，可以将它们结合起来。

+1真棒的答案！我已经尽了我的本分，给了大家荣誉分。非常感谢您的时间。您认为是否可以使用一个框来选择是否启用/禁用fisheye，而不是将它们组合在一起？这将是两个世界中最好的结合，如果你有时间的话，这将是一个很棒的补充。当然，你可以做到。用于添加或删除事件侦听器。