如何重新创建GitHub网络图

Question

是否有任何开源项目或jQuery插件,我可以用来重新创建GitHub网络图？

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

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. 从Github Network API获取数据
2. 创建d.KeyDriver和d.MouseDriver处理输入的实例
3. 用于d.Chrome绘制时间轴,页眉和页脚
4. 用于d.Graph编写网络图

(每个d.ClassName都是Network对象的内部类,因此它们的defineNetwork源代码在源代码中找到)

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

• (可能)进行非常小的修改,以获取代码在github.com外部呈现Github数据
• 以Github网络API格式提供您自己的数据,并将其可视化
• 只调整d.Graph课程以使用您自己的数据
• 只需阅读代码并学习

注意:您可能无法合法地使用代码或修改,因此我建议仅为学习目的(尽管IANAL).

Answer 2

您可能希望依赖Github的Network API来处理:

列出绘制网络图所需的所有数据,每个fork的头部都有新的更改以及所有相关的提交.

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