D3/GraphGL 力定向网络可视化的放大镜效果？

Question

使用 D3 或 GraphGL 将鼠标悬停在力导向图形可视化中的节点上时，是否可以创建平滑的动画放大效果（类似于 Mac OS X 上的扩展坞）图书馆？

这些节点需要扩展并取代周围的其他节点，同时保持力导向的布局。

如果有人可以分叉来演示，那就太好了！谢谢

注意，这与 这个问题

Answer 1

很好的问题。为了回答这个问题，我为 D3 插件 实现了.com/d3/d3-plugins/tree/master/fisheye" rel="nofollow noreferrer">鱼眼失真。它大致基于 Flare 和 Sigma.js 之前的工作，而后者又基于 Sarkar 和 Brown 的工作，“图表的图形鱼眼视图”，CHI'92。

这是使用 Misérables 数据集的快速演示。查看代码的源代码。今天晚些时候，当我有时间的时候，我会写一篇文章。

注意：这里使用静态力布局；布局是在启动时计算的并且不会改变。我认为这可能是您想要与鱼眼失真结合使用的效果，否则失真将与您动态移动节点的能力相竞争。但理论上，如果您愿意的话，可以将它们结合起来。

Answer 2

如果您可以使用纯 CSS 来完成此操作，那就太棒了，但不幸的是，看起来各种 SVG 元素（即圆圈）的属性无法通过 CSS 访问。特别是“半径”，但我认为对于所有 SVG 元素属性来说都是如此。

但通过 d3 做到这一点并不难。这是我的示例 jsfiddle。基本上，您执行以下操作：

1. 使用过渡（请参阅 教程 #2 来学习如何使用这些）。基本上执行 d3element.transition().delay(300).attr(...) 来使更改发生。
2. 为了防止“放大”的圆圈重叠，我能想到的最好办法是修改 强制布局的收费设置。当圆圈较大时，增加排斥力。

希望这就是您正在寻找的...

Answer 3

如果你接受的话，纯 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);
}

它用在我的主页上tuoxie.me