D3js diagram, after the end of the simulation, the text display position on the connection line is not right

D3js force guide graph force initialization, the line above the word display position is wrong. When you drag the node, the text returns to the desired position.

enter image description here

    var force = d3.layout.force()
      .nodes(d3.values(nodes))
      .links(links)
      .size([width, height])
      .linkDistance(120)
      .charge(-1200)
      .on("tick", tick)
      .start();




    edges_text.attr("class", "textPaths").append('textPath')
      .attr('xlink:href', function (d, i) { return '#edgepath' + i })
      .style("pointer-events", "none")
      .text(function (d) { d.relationshipName; });

function tick() {
   
      edges_text.attr('transform', function (d, i) {
        if (d.target.x < d.source.x) {
          let bbox = this.getBBox();
          let rx = bbox.x + bbox.width / 2;
          let ry = bbox.y + bbox.height / 2;
          return 'rotate(180 ' + rx + ' ' + ry + ')';
        }else {
          return 'rotate(0)';
        }
      }).attr('dx', function (d, i) {
          if(d.source.x < d.target.x){
            let source = getCoord(d.target, d.source).split(" ")
            let target = getCoord(d.source, d.target).split(" ")
            return Math.sqrt(Math.pow(target[0] - source[0], 2) + Math.pow(target[1] - source[1], 2)) / 2 - 20;
        }else{
            let source = getCoord(d.source, d.target).split(" ")
            let target = getCoord(d.target, d.source).split(" ")
            return Math.sqrt(Math.pow(target[0] - source[0], 2) + Math.pow(target[1] - source[1], 2)) / 2 - 20;
        }   
        })
        ;
    }