d3 强制布局和 Firefox答案

【问题标题】：d3 force layout and Firefoxd3 强制布局和 Firefox
【发布时间】：2014-05-17 01:24:27
【问题描述】：

我正在使用 D3.js 并创建一个强制布局来为一堆漂浮的圆圈设置动画。它在 webkit 浏览器上运行良好，但我很失望地看到它在 Firefox 中运行非常缓慢和笨重。

但“答案”基本上就是不要做那么多事情，这样 FF 就不必那么努力了。我宁愿不淡化效果。所以我的问题是如何在不破坏 FF 的情况下做类似的事情。

例如，Raphael 能否以 Firefox 可以更好地处理的方式做到这一点？

还有其他对 x 浏览器更友好的库吗？

也许是另一个想法？

【问题讨论】：

用“类似的东西”定义你的意思。动画的哪些部分对您很重要？你有很多节点还是只有几个节点，它们是简单的圆圈还是复杂的图形？ Raphael 不太可能是一种改进，但对于某些非常复杂的可视化类型，使用基于<canvas> 的图形可以减轻浏览器负载，因为您没有为每个节点设置单独的 DOM 元素。 Example here
我想我想保持分别与各个节点交互的能力。如果我使用画布，它们都会被冻结在适当的位置，而 svg 元素可以单独设置动画，对吗？
差不多。您可以通过重新绘制部分来为画布设置动画，但如果您希望用户与节点进行交互，那么您最终需要大量代码来确定鼠标下方的节点图像，这可能会抵消任何效率.如果画布已经出局，恐怕除了其他问题之外我没有任何建议：专注于使图形易于绘制和重新定位。也许我会补充：如果您还没有，请尝试使用transform 来定位节点而不是x/y。它与 HTML 有很大不同，还没有真正用 SVG 测试过。

【解决方案1】：

试试Kinetic.js。

这是一个基于 HTML 画布（相对于 SVG）的跨浏览器图形库，强调高性能和动画。您可以使用此库操作图形基元，即使它们是在画布中呈现的。

不幸的是，据我所知，它没有内置的力布局解决方案。也就是说，开发它似乎并非不可能。

希望这会有所帮助。

【讨论】：