如何获得repo/network网络的完整github.com可视化

Question

编辑:这应该是我母亲的礼物,如果我必须拖放它并将一堆屏幕打印在一起......但是资源必须存放在某个地方的网站上.我相信这个网站上至少有人知道如何做到这一点.

编辑:所以我在这个上挖了一下,发现如果你把/ meta放在网络后你得到一个JSON.此外/ chunk在页面源中,但在加载/块后,/ chunk或/ meta都不再为我加载.我只想在一张图片中看到整个图表,是不是要问太多了？

在github中添加/ network到repo URL的末尾会给我一个像这样的图像

你可以点击并左右拖动,但对于我的生活,我一次无法获得超过一小部分.

是否可以在一个图像文件中生成整个网络图的任何工具？

我不想要一块图表,我想查看整个图表.我在另一个问题中看到了http://gitup.co/,但它似乎只是OS X. Linux或Microsoft软件解决方案对我有用.

谢谢

Answer 1

这也困扰着我。我想在 GitHub 上看到这个，而不导出任何 JSON。例如，在任何 GitHub“网络”页面上，在 Firefox或 Chrome 的JS 控制台中：

1. （可选）取消缩放视图( cmd/ ctrl+ scroll)

2. 在 JS 控制台（cmd+opt+k或ctr+alt+k）中执行：

document.getElementById("network").style="width:20000px"; window.dispatchEvent(new Event("resize"))

3. 按住右箭头键扫描图表以进行实际渲染。

笔记：

• 我还没有弄清楚触发重绘的确切事件。脚本重绘似乎只工作一次。
• 尺寸可以定制，但太高的值是有问题的
• 取消缩放步骤：如果存储库有许多分叉，则缩小会调整画布链接到的高度window.innerHeight
• 画布上的活动元素（提交）交互不佳。

Answer 2

我刚刚再次遇到这个问题，终于找到了一个不错的解决方案。

以下是代码的要点：https://gist.github.com/DinisCruz/6866dede5cdff60d97790a14490f7844

function hide(selector) { $(selector).setAttribute('style','display:none')} 
function remove(selector) { $(selector).remove()} 
function remove_class(selector) { $(selector).setAttribute('class','')} 

function move_left(count)
{        
    var eventObj = document.createEvent("Events");
    eventObj.initEvent("keydown", true, true);
    eventObj.which = 37;  // left key
    for (i=0; i < count ; i++) {
        document.dispatchEvent(eventObj);
    }
} 

function resize_canvas(width)
{
    document.getElementById("network").style="width:" + width; window.dispatchEvent(new Event("resize"))
}


remove('.pagehead')
remove('.js-header-wrapper')
remove('.menu')
remove('.Subhead')
remove('.info')
remove('.btn-link')
remove('.footer')
remove_class('.container-lg')
// Note: they updated this class name from .p4-4 to .pb-4
remove_class('.pb-4')

resize_canvas('2150px')
move_left(14)

相关推特线程（显示一些示例）：https://twitter.com/DinisCruz/status/1171411025570275329

Answer 3

我的答案不是创建图像作为输出；而是创建图像作为输出。但对于那些想要有用的网络图的人来说可能会有所帮助。

我为 GitHub 网络页面编写了一个用户脚本：https ://github.com/maliayas/github-network-ninja

基本上它提供了：

• 全视口网络图。
• 可搜索的提交列表。

[单击图像查看完整尺寸。]