javascript - 与共同的 parent 和 child 一起绘制整齐的图表

标签 javascript git graph tree directed-graph

我正在开发一个 HTML 和 Javascript 应用程序,它将采用 git 树并将提交和 merge 显示为有向图(如 git log --graph)。我读过一些关于 Reingold-Tilford tidy 算法的内容,但它似乎不适用于具有共享父级和子级的节点的图。所需输出的示例(作为文本,但我正在查看 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 ),尽管它有点密集。

感谢您的帮助。

最佳答案

首先,查看 ruby​​gem Git:http://rubygems.org/gems/git 这将为您节省大量工作。

其次,我尝试使用 d3.js 并发现它非常复杂且功能强大。您打算创建的图表将非常适合它,甚至还有一个 d3_rails gem: http://rubygems.org/gems/d3_rails

但请记住,如果您只需要对几个形状进行简单的图形表示以显示最小的复杂性(无需向下钻取等),您可能会考虑使用 HTML5 的 Canvas 。非常易于使用,但缺乏 d3.js 的功能。

关于javascript - 与共同的 parent 和 child 一起绘制整齐的图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12643585/

相关文章:

javascript - 将数组中所有对象的单个字段复制到单个数组中

javascript - React.js-使用 html 动态制作网格

git - 如何管理一个项目的多个版本?

git - 重置 --soft 和 --mixed 之间的区别

Git 仍然添加和跟踪在 .gitignore 中标记的文件夹

java - 随机化顶点位置 JUNG

javascript - 在 Javascript 或 Jquery 中的 Iframe 中外部站点的 URL 时出现错误

javascript - npm run dev 在 Laravel 项目中不起作用 : TypeError: program. parseAsync 不是函数

algorithm - 图算法拆解

git - 图表贡献者为空