与共享父母和孩子一起绘制整洁的图表

时间:2012-09-28 16:10:43

标签: javascript git graph tree directed-graph

我正在开发一个HTML和Javascript应用程序,它将获取一个git树并显示提交并合并为有向图(如git log --graph)。我已经阅读了一些关于Reingold-Tilford整洁算法的内容,但它似乎并不适用于具有共享父母和孩子的节点的图形。所需输出的一个例子(作为文本,但我正在查看像d3js和Raphael这样的图形库):

*   - 1 day ago
|
*   - 2 days ago
|\
| * - 3 days ago
|/
*   - 4 days ago
|
*   - 5 days ago

是否有任何库已经处理过这个?是否有像这样渲染图形的例子(用任何语言)?作为最后的手段,我想我会尝试从git本身(https://github.com/git/git/blob/master/graph.c)重现图形,虽然它有点密集。

感谢您的帮助。

2 个答案:

答案 0 :(得分:1)

首先,查看rubygem Git:http://rubygems.org/gems/git 这将为你节省很多工作。

其次,我尝试使用d3.js,发现它非常复杂和强大。您打算创建的图表可以很好地工作,甚至还有一个d3_rails gem: http://rubygems.org/gems/d3_rails

但是请记住,如果你只需要做一些形状的简单图形表示来显示最小的复杂性(没有下钻等),你可能会考虑使用HTML5的画布。非常容易使用,但缺乏d3.js的功能。

答案 1 :(得分:1)

经过一段时间实现我自己相当可怕的图表之后,我听说了GitLab和他们的开源GitHub实现。他们有一个类似GitHub的“网络”图表的实现,可以在他们的repository中找到。

有问题的一些文件:

  • LIB / gitlab /图形/ commit.rb
  • LIB / gitlab /图形/ json_builder.rb
  • 售货机/资产/ Javascript角/分支graph.js

通过一些修改,我能够弄清楚他们是如何实现他们的网络图并使用他们的代码版本取得巨大成功。