Question

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

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

如果有人可以fork this进行演示，那就太棒了！感谢

中的简单缩放不同

Answer 1

好问题。为了回答这个问题，我为D3 plugin实施了fisheye distortion。它大致基于之前Flare和Sigma.js的工作，而这些工作又基于Sarkar和Brown的工作，"Graphical Fisheye Views of Graphs"，CHI'92。

这是一个带有Misérables数据集的quick demo。查看代码的来源。我有空的时候今天晚些时候写一篇文章。

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

Answer 2

如果你能用纯CSS做到这一点真是太棒了，但不幸的是，看起来各种SVG元素（即圆圈）的属性无法通过CSS访问。特别是'radius'，但我认为对于一大堆SVG元素属性来说都是如此。

但是通过d3做起来并不难。这是my example jsfiddle。基本上你做了以下几点：

使用过渡（请参阅Tutorial #2了解如何使用这些过渡）。基本上做一个d3element.transition().delay(300).attr(...)来进行更改。
为了防止'爆炸'圈子重叠，我可以做的最好的事情就是修改force layout's charge设置。当圆圈较大时，增加排斥力。

希望那就是你要找的......

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

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

3 个答案: