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;
        }   
        })
        ;
    }