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

Question

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

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

如果有人可以 分叉这个 来证明，那就太好了！谢谢

请注意，这与简单的缩放不同，如 这个问题

Answer 1

很好的问题。为了回答这个问题，我实施了一个 D3插件 为了 鱼眼畸变. 。它大致基于 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);
}

我的主页上使用了它 脱鞋网