D3 v5 节点绘制折线连线(一折)

版本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对象。