D3 v5 相同节点多线重叠简单简单处理

最新推荐文章于 2024-07-20 17:18:03 发布

我只是一个coder

最新推荐文章于 2024-07-20 17:18:03 发布

阅读量1.3k

点赞数 2

分类专栏：杂乱技术

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

版权

杂乱技术专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种用于在线条两端节点间创建简洁连线的算法。该算法通过判断源节点与目标节点的位置关系，智能调整连线路径，避免了复杂的代码实现，满足了从左到右或从上到下的连线需求。

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

一般我们在线条两个相同节点有时候会有多个连线节点.

在网上搜索了很多答案，大多数过于复杂，关算法部分就能累计几百行了。

其实，仔细探究下原理，也就是，source，target，

是从左到右，还是从右到做. 到哪里进行一折，哪里二折

这里给出一个简单处理办法


  if (source.x < target.x) {
                    if (this.isExists(link.id)) {
                        var index = link.add_index;
                         return "M" + source.x + "," + (source.y) + " L" + (source.x + index) + "," + (source.y + index)
                            + " L" + (target.x - 15) + "," + (source.y + index) + " L" + target.x + "," + target.y;
                    }
                } else {
                    var index = link.add_index;
                     return "M" + source.x + "," + (source.y) + " L" + (source.x-15 ) + "," + (source.y - index)
                        + " L" + (target.x - 15) + "," + (source.y - index) + " L" + target.x + "," + target.y;
                }

当满足第一个条件 if (source.x < target.x) 的时候，就是从左到右，反之则然

当然也可以从上到下。核算偏移角度等。此时已可以满足需求.