[skywalking-rocketbot-ui] branch master updated: topology of two mutually calling services (#454)

[qi...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

qiuxiafan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-rocketbot-ui.git


The following commit(s) were added to refs/heads/master by this push:
     new e0511ac  topology of two mutually calling services (#454)
e0511ac is described below

commit e0511acd6d90c4bff73a8aae3872f18b3dbf84d6
Author: CharliePu <he...@163.com>
AuthorDate: Thu Mar 25 20:59:40 2021 +0800

    topology of two mutually calling services (#454)
---
 src/views/components/topology/chart/topo.vue | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/views/components/topology/chart/topo.vue b/src/views/components/topology/chart/topo.vue
index 7f78c35..802b7cc 100644
--- a/src/views/components/topology/chart/topo.vue
+++ b/src/views/components/topology/chart/topo.vue
@@ -167,12 +167,28 @@ limitations under the License. -->
         this.simulation.nodes(this.nodes);
         this.simulation.force('link').links(this.links).id((d) => d.id);
         simulationSkip(d3, this.simulation, this.ticked);
+        const loopMap = {};
+        for (let i = 0; i < this.links.length; i++) {
+          const link = this.links[i];
+          link.loopFactor = 1;
+          for (let j = 0; j < this.links.length; j++) {
+            if (i === j || loopMap[i]) {
+              continue;
+            }
+            const otherLink = this.links[j];
+            if (link.source.id === otherLink.target.id && link.target.id === otherLink.source.id) {
+              link.loopFactor = -1;
+              loopMap[j] = 1;
+              break;
+            }
+          }
+        }
       },
       ticked() {
         this.link.attr('d', (d) => `M${d.source.x} ${d.source.y} Q ${(d.source.x
-        + d.target.x) / 2} ${(d.target.y + d.source.y) / 2 - 90} ${d.target.x} ${d.target.y}`);
+        + d.target.x) / 2} ${(d.target.y + d.source.y) / 2 - d.loopFactor * 90} ${d.target.x} ${d.target.y}`);
         this.anchor.attr('transform', (d) => `translate(${(d.source.x +
-        d.target.x) / 2}, ${(d.target.y + d.source.y) / 2 - 45})`);
+        d.target.x) / 2}, ${(d.target.y + d.source.y) / 2 - d.loopFactor * 45})`);
         this.node.attr('transform', (d) => `translate(${d.x - 22},${d.y - 22})`);
       },
       dragstart(d) {