2011-01-21 10 views
18

¿Hay proyectos de código abierto por ahí o plugin de jQuery que puedo usar para recrear la GitHub Network Graph?cómo volver a crear la Red de GitHub Gráfico

quiero crear algo con una funcionalidad similar.

+3

inicie sesión, acceda a su repositorio github, haga clic en 'red' – zack

+0

@zack, eso es mejor de lo que estaba a punto de decir, "ver código fuente" =) – Incognito

+0

nada como el buen ol desarrollador de sentido del humor. - Revisé la fuente antes de publicar aquí, pero es tan exclusiva que me resulta imposible realizar una ingeniería inversa. Es por eso que esperaba que hubiera alguna solución de os por ahí. - Gracias por el consejo. – Ward

Respuesta

8

Es posible que desee confiar en Github's Network API que maneja:

Listado de todos los datos necesarios para la elaboración del gráfico de la red, jefes de cada tenedor con nuevos cambios y todas las confirmaciones pertinentes.

En cuanto a la representación, Github utiliza lienzo para mostrar su gráfico de red. Es posible que desee echar un vistazo a la RaphaelJS library hace un buen trabajo de representación gráficas de impacto del Github: http://raphaeljs.com/github/impact.html

+0

El enlace para la documentación de la red API ahora es una página 404. ¿Esto es obsoleto? o hay un nuevo enlace para esto? –

+0

@MichaelT Supongo que esto ahora sería http://developer.github.com/v3/activity/events/? –

22

Los puntos de vista de la red Github parecen muy difíciles de aplicar ingeniería inversa al principio. Sin embargo, el código se vuelve bastante comprensible después de eliminarlo con http://jsbeautifier.org/. Por lo tanto, ejecute bundle_github.js y bundle_common.js y obtenga una fuente jQuery 1.4.2. Entonces estás listo para comenzar a leer la fuente/depuración de la página.

En la página de Github red, si el lienzo está trabajando, la red se genera simplemente por:

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

que va a utilizar un objeto generado por defineNetwork(window.jQuery), que (entre muchas otras cosas)

  1. obtiene datos de the Github Network API
  2. crea instancias de d.KeyDriver y d.MouseDriver para el manejo de entrada
  3. utiliza d.Chrome para dibujar línea de tiempo, cabecera y el pie
  4. utiliza d.Graph para escribir el gráfico de la red

(cada d.ClassName es una clase interna del objeto de red, por lo tanto su fuente se encuentra dentro del código defineNetwork fuente)

No me tomé el tiempo para realmente profundizar en el código y encontrar todos los detalles sobre cómo funciona, pero es legible bien. Ahora, dependiendo de lo que quieras hacer, podrías p. Ej.

  • (probablemente) hacen muy menores modificaciones para obtener el código para representar datos Github fuera GitHub.com
  • hacer sus propios datos disponibles en the Github Network API formato y visualizar que
  • adaptar simplemente la clase d.Graph a trabajar con sus propios datos
  • acaba de leer el código y aprender

NOTA: Probablemente legalmente no puede usar el código tal como está ni modificado, por lo que recomiendo hacerlo únicamente con fines de aprendizaje (aunque sea IANAL).

+0

Esto parece ser un enlace roto: http://develop.github.com/p/network.html ¿Github eliminó esa opción? – GuySoft

+1

@GuySoft La API de Github se ha actualizado en los últimos dos años, y los detalles de esta respuesta están desactualizados. Supongo que el gráfico de red hoy en día usa las API de bifurcaciones y bifurcaciones. De todos modos, todavía es fácil agarrar el código, embellecerlo y ver lo que hace. – dancek

Cuestiones relacionadas