如何重新创建GitHub网络图 [英] How to recreate the GitHub Network Graph

问题描述

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

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

解决方案

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

在Github Network页面中，如果画布正在工作，则网络的生成过程如下： / p>

  var ng = new Network（＃ng，920,600）
  

继续使用由 defineNetwork（window.jQuery）生成的对象，很多其他的东西）

1. 从


2. 创建 d.KeyDriver 和<$ c $的实例c> d.MouseDriver 用于处理输入


3. 使用 d.Chrome 绘制时间轴，页眉和页脚


4. 使用 d.Graph 编写网络图

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

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

• （可能）做很小的
  修改以获取代码到
  在
  之外呈现Github数据github.com


• 使您自己的数据在 Github Network API 格式，并可视化


• 只适合 d .Graph 类使用您自己的数据


• 只需阅读代码并学习

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

Are there any open source projects out there or jQuery plugin that I can use to recreate the GitHub Network Graph?

I want to create something with similar functionality.

解决方案

The Github network views seem very difficult to reverse engineer at first. However, the code becomes quite understandable after de-minifying it with http://jsbeautifier.org/ . So run bundle_github.js and bundle_common.js through and grab a jQuery 1.4.2 source. Then you're ready to start reading the source / debugging the page.

In the Github Network page, if the canvas is working, the network is generated simply by:

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

which goes on to use an object generated by defineNetwork(window.jQuery), which (among a lot of other things)

1. gets data from the Github Network API
2. creates instances of d.KeyDriver and d.MouseDriver for handling input
3. uses d.Chrome to draw timeline, header and footer
4. uses d.Graph to write the network graph

(each d.ClassName is an inner class of the Network object, thus their source is found inside the defineNetwork source code)

I didn't take the time to really delve into the code and find all the details on how it works, but it's readable alright. Now depending on what you want to do, you could e.g.

• (probably) make very minor modifications to get the code to render Github data outside github.com
• make your own data available in the Github Network API format, and visualize that
• adapt just the d.Graph class to work with your own data
• just read the code and learn

NOTE: You probably can't legally use the code as-is nor modified, so I recommend doing this only for learning purposes (though IANAL).

这篇关于如何重新创建GitHub网络图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！