版本V5,折线一般会用到(直线过于基础,跳过)
一折
二折
此篇实现的是一折,下篇实现二折.
下面为初始创建连一折的连线。
var souce_m = "M" + source.x + "," + source.y;
var target_l = "L" + target.x + "," + target.y;
return souce_m + " L" + target.x + "," + source.y + " " + target_l;
此时拖动节点的时候,如会发现 没有跟随连线。
这时需要在onDrag 节点的连线中,重绘坐标
this.xxxx.attr('d', link => $this.genLinkPath(link) );
其中xxx为页面创建 节点相关的 的line对象。