在两个节点之间画一条线

Question

我有一个使用AngularJS的解决方案，它在锦标赛树中生成一个匹配的括号：

我的问题是如何在使用ng-repeat生成的两个节点之间画一条线，所以看起来像这样？

我一直在研究其他问题，比如Question 1，我一直试图使用这个代码示例： jsfiddle.net/kDs2Q/1047 / 但是我无法弄清楚如何将它与ng-repeat一起使用。

修改

我已经做了一个简单的小提琴尝试设置我的一些解决方案。

jsfiddle.net/U3pVM/14850/

当您单击“绘制线”时，它会绘制一条远离两个节点的线。如何使用绘制的线连接两个节点？同样，如果我添加另一个节点，它将连接到下一个节点。

[节点1 ] --- [节点2 ] --- [节点3

编辑2：

好的，所以我已尽力从我自己的解决方案中创建一个小提琴。我做了一个设置，其中每个节点都有一个Id和一个ParentId。这样我就可以设置从子节点到父节点的行。

但似乎我在angularjs中的traverseScopesLoop中遇到了一个连续的循环。我不能让它渲染。

我怀疑“connect”函数中的document.body.innerHTML += htmlLine;可能是循环的原因？

请看一下这个小提琴，并记住功能“iterateAndGenerateDivsForDrawnLines”已经过时。您需要删除out outment以运行该函数并启动循环。

jsfiddle.net/U3pVM/14934/

帮助，建议，链接 - 一切都表示赞赏！先感谢您。 ：）