Как воссоздать GitHub Network Graph

Question

Существуют ли какие-либо проекты с открытым исходным кодом или плагин jQuery, который я могу использовать для воссоздания GitHub Network Graph?

Я хочу создать что-то с похожей функциональностью.

Answer 1

Представления сети Github на первый взгляд кажутся очень сложными для обратного проектирования. Тем не менее, код становится вполне понятным после деинимизации его с помощью http://jsbeautifier.org/. Итак, запустите bundle_github.js и bundle_common.js и возьмите исходный код jQuery 1.4.2. Тогда вы готовы начать читать исходный код / ​​отлаживать страницу.

На странице сети Github, если холст работает, сеть генерируется просто:

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

, который продолжает использовать объект, сгенерированный defineNetwork(window.jQuery), который (среди многих других вещей)

1. получает данные от Сетевого API Github
2. создает экземпляры d.KeyDriver и d.MouseDriver для обработки ввода
3. использует d.Chrome для рисования шкалы времени, верхнего и нижнего колонтитула
4. использует d.Graph для записи сетевого графика

(каждый d.ClassName является внутренним классом объекта Network, поэтому их источник находится внутри исходного кода defineNetwork)

Я не потратил время на то, чтобы по-настоящему вникнуть в код и найти все подробности о том, как он работает, но он хорошо читается. Теперь, в зависимости от того, что вы хотите сделать, вы можете, например,

• (вероятно) очень незначительно модификации, чтобы получить код визуализировать данные Github снаружи github.com
• сделайте ваши собственные данные доступными в формате Github Network API и визуализируйте это
• Адаптируйте только класс d.Graph для работы с вашими собственными данными
• просто прочитайте код и изучите

ПРИМЕЧАНИЕ. Вы, вероятно, не можете легально использовать код как есть и не изменять, поэтому я рекомендую делать это только для целей обучения (хотя IANAL).

Answer 2

Вы можете положиться на Сетевой API Github , который обрабатывает:

Перечисление всех данных, необходимых для построения сетевого графика, заголовков каждого форка с новыми изменениями и всеми соответствующими коммитами.

Что касается рендеринга, Github использует canvas для отображения своего сетевого графика. Возможно, вы захотите взглянуть на библиотеку RaphaelJS , которая отлично справляется с рендерингом графиков воздействия Github http://raphaeljs.com/github/impact.html