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

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

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

其实,仔细探究下原理,也就是,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)   的时候,就是 从左到右,反之则然

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

猜你喜欢

转载自blog.csdn.net/lhf214111967/article/details/104797284