如何重新创建 GitHub 网络图答案

【问题标题】：How to recreate the GitHub Network Graph如何重新创建 GitHub 网络图
【发布时间】：2011-01-21 13:47:42
【问题描述】：

是否有任何开源项目或 jQuery 插件可以用来重新创建 GitHub Network Graph?

我想创建具有类似功能的东西。

【问题讨论】：

登录，去你的github repo，点击'network'
@zack，这比我要说的要好，“查看源代码”=)
没有什么比优秀的开发者幽默感更好的了。 - 我在发布之前查看了源代码，但它是如此专有，以至于我无法对其进行逆向工程。这就是为什么我希望那里有一些操作系统解决方案。 - 谢谢你的提示。
我想解决方案包括查看 repo 中的提交对象并从父指针构造一个图表。

【解决方案1】：

Github 网络视图一开始似乎很难进行逆向工程。但是，在使用 http://jsbeautifier.org/ 将其分解后，代码变得非常容易理解。所以运行bundle_github.js 和bundle_common.js 并获取一个jQuery 1.4.2 源代码。然后你就可以开始阅读源代码/调试页面了。

在 Github Network 页面中，如果 canvas 正在工作，则网络是通过以下方式生成的：

var ng = new Network("#ng", 920, 600)

它继续使用由defineNetwork(window.jQuery) 生成的对象，它（以及许多其他东西）

从the Github Network API获取数据
创建d.KeyDriver 和d.MouseDriver 的实例以处理输入
使用d.Chrome 绘制时间线、页眉和页脚
使用d.Graph写网络图

（每个d.ClassName 都是Network 对象的一个内部类，因此它们的源代码在defineNetwork 源代码中）

我没有花时间真正深入研究代码并找到有关其工作原理的所有详细信息，但它的可读性还不错。现在取决于你想做什么，你可以例如

（可能） 非常轻微修改以获取代码在外部渲染 Github 数据 github.com
以the Github Network API 格式提供您自己的数据，并将其可视化
仅调整 d.Graph 类以处理您自己的数据
只需阅读代码并学习

注意：您可能无法按原样或修改合法地使用代码，因此我建议仅出于学习目的这样做（尽管是 IANAL）。

【讨论】：

这似乎是一个断开的链接：develop.github.com/p/network.html github 是否删除了该选项？
@GuySoft Github API 在过去两年中已经更新，这个答案的细节现在已经过时了。我猜现在的网络图使用分支和分叉 API。反正随便抓个代码，美化一下看看效果还是很简单的。

【解决方案2】：

您可能希望依靠 Github's Network API 来处理：

列出绘制网络图所需的所有数据、具有新更改的每个分支的负责人以及所有相关提交。

在渲染方面，Github 使用 canvas 来展示它的网络图。你可能想看看RaphaelJS library 在渲染 Github 的影响图方面做得很好： http://raphaeljs.com/github/impact.html

【讨论】：

网络 API 文档的链接现在是 404 页面。这已经过时了吗？还是有新的链接？
@MichaelT 我想现在应该是developer.github.com/v3/activity/events ?