javascript - 具有可折叠缩放功能的网络可视化 d3 示例

Question

我对这个主题进行了深入的搜索，但很难找到这方面的任何例子。

小背景:

我是 d3 的初学者，试图构建一个网络可视化，可以缩小时折叠其节点。我正在谈论的完美例子在这里: http://www.twittercensus.se/graph2013/甚至 googlemaps(不知道他们是如何做到的，但我想使用 d3.js 做同样的事情)

想法不是显示所有节点(10K+)，而是将它们分组并仅显示组。当我放大时，该组应该展开(假设所有节点都使用碰撞检测间隔开)

再次强调一下，当我放大时，我不希望节点看起来更大，但我想要一个折叠功能，将合并的节点分解为更小的节点。

一些有用的链接:

• http://bl.ocks.org/mbostock/9656675 - d3 正常放大示例(无折叠功能)
• D3.js Zooming and panning a collapsible tree diagram - 同样，这只是展示了如何在折叠时隐藏节点(无缩放折叠功能交互)
• Collapsible/hierarchical AND force-directed graph in d3.js - 显示崩溃网络的有用示例，但不是以放大方式。 (无缩放功能)

Answer 1

您需要结合第二个和第三个链接中的代码，然后您就会得到答案。