Edit D3 SVG's links position in a "radial" Chart

I am facing a problem that I did not succeed to fix, in this case, I'd like to move the links starting from the middle of the rectangle to put them at the extremity so that PUB-2 and PUB-3 don't cross each other.

Any idea ? Here is the source code https://bl.ocks.org/mbostock/4339083 (d3 website) and the working codepen (https://codepen.io/andrea06590/pen/mzJmpE) in which I changed the original circles into rectangles using the code bellow + link spacing on line 126 :

  nodeEnter.append("rect")
      .attr("width", 75)
      .attr("height", 20)
      .attr("x", -10)
      .attr("y", -10)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "red"; });

from Edit D3 SVG's links position in a "radial" Chart