如何重新创建GitHub网络图

Question

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

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

Answer 1

Github网络视图起初看起来很难进行逆向工程。但是，在使用http://jsbeautifier.org/去除代码后，代码变得非常容易理解。因此，运行bundle_github.js和bundle_common.js并获取jQuery 1.4.2源代码。然后你就可以开始阅读源代码/调试页面了。

在Github Network页面中，如果画布正在运行，则只需通过以下方式生成网络：

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

继续使用由defineNetwork(window.jQuery)生成的对象，（在很多其他事情中）

1. 从the Github Network API
获取数据
2. 为处理输入
创建d.KeyDriver和d.MouseDriver的实例
3. 使用d.Chrome绘制时间轴，页眉和页脚
4. 使用d.Graph编写网络图

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

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

• （可能）非常轻微 修改以获取代码 在外面渲染Github数据 github.com
• 以the Github Network API格式提供您自己的数据，并可视化
• 仅调整d.Graph类以使用您自己的数据
• 只需阅读代码并了解

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

Answer 2

您可能希望依赖处理：

的 Github's Network API

  

列出绘制网络图所需的所有数据，每个分支的头部都有新的更改以及所有相关的提交。

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