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

Question

D3当使用orGraphGL库将鼠标悬停在力导向图形可视化中的节点上时，是否可以创建平滑的动画放大效果（类似于 Mac OS X 上的停靠栏） ？

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

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

请注意，这与此问题中的简单缩放不同

Answer 1

好问题。为了回答这个问题，我实现了一个用于鱼眼失真的D3 插件。它大致基于以前在 Flare 和 Sigma.js 中的工作，而这些工作又基于 Sarkar 和 Brown 的工作，“Graphical Fisheye Views of Graphs”，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上使用