Как воссоздать сетевой график GitHub

Ответ 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), который (среди множества других вещей)

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

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

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

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

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

Ответ 2

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

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

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