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

我只是一个coder

于 2020-03-07 15:54:50 发布

阅读量729

点赞数 1

分类专栏：杂乱技术

本文链接：https://blog.youkuaiyun.com/lhf214111967/article/details/104715916

版权

杂乱技术专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了如何使用SVG在网页上绘制一折连线，并在节点拖动时实时更新连线路径，确保连线始终准确连接两个节点。文章通过具体代码示例展示了如何创建连线以及如何在节点位置改变时重绘连线。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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