我如何在视觉上比较重构选项?

时间:2015-03-25 17:54:31

标签: d3.js diff visualization force-layout directed-graph

我有一个现有的系统模型,以DAG的形式表示服务调用由其他服务中的一个或多个实现支持的API。我一直在GraphViz dot files' digraph呈现这个,这是相当合理的,如果有时难以强制执行分层。

Diagram of service and API dependencies

在考虑各种可能的服务和API重构时,我希望能够为最终目标制定替代路线。每个重构步骤都会产生一个不同的DAG - 用前一个DAG的差异表示(例如,转换服务 A 在服务 B中使用API​​ x 到服务 C 中的API y - 并且类似地可渲染。

有哪些工具可以创建这样的“重构路径”,然后可视化它们之间的流,确定依赖关系和并行性?寻求目标的额外奖励积分(例如,除了服务 A 服务 C 之外的任何服务的依赖性;基于权重的最便宜路径)并提供重构的松散排序证明他们(可能)单调递增的系统价值。

我正在想象两个UI组件:

  1. 一个DAG差异,在视觉上显示在源图中被替换的节点/向量与第二个中的节点/向量
  2. 一个控制显示,其行为类似D3force layout,可让您导航松散连接的重构DAG,并选择您希望在DAG差异中查看前/后图片的重构
  3. 那就是说,我完全取决于其他工具,格式等。只是希望能够制作这些并将它们展示给其他人,以便我们为什么做的是有价值的(目标断言)和服用只要它(依赖和甘特图)。

1 个答案:

答案 0 :(得分:1)

您是否可以创建一个单独的工具,给定两个类似的DAG,输出它们的“合并”?如果可能,那么可视化合并DAG可能会告诉你很多关于两个DAG的信息。您可以根据节点是出现在DAG中还是出现在任何一个节点中对节点进行颜色编码。

这就是我们最初在VisTrails see here中设计工作流图的视觉差异的方式。

如果你坚持同时显示两个DAG,那么创建合并DAG可能仍然是正确的想法,因为然后dot可以放置合并图,你可以简单地隐藏合适的每个子图的节点。通过这种方式,共享结构将通过构造一致地布局。