Aligning x position of tspan in IE11 using d3.js

Really struggling with this. I've tried a lot of hacks to get the labels to render correcly on my force directed d3 graph. Here is a stackBlitz

You will notice in all other browsers except IE11 renders ok.

In IE:

As you can see in IE11 the first <tspan> isn't anchored to the middle. I've tried a combination of things with and without the x attribute, dx manipulation. I have lined them up via the dx attribute but as each set of labels have different lengths the math isn't the same for each.

The svg structure is as follows:

<text class="edgelabel" id="edgelabel0" font-size="10" style="text-anchor: middle;">
   <textPath xlink:href="#edgepath0" dominant-baseline="middle" startOffset="50%" style="cursor: pointer;">
      <tspan class="edgelabels" dx="0">label one</tspan>
      <tspan class="edgelabels" x="0" dy="22" dx="0">label two</tspan>
      <tspan class="edgelabels" x="0" dy="22" dx="0">label three</tspan>
   </textPath>
</text>

You can see above in this particular implementation I intentionally left out the x attribute for the first tspan.

This is the code that renders the above:

const edgelabels = zoomContainer
  .selectAll('.edgelabel')
  .data(links)
  .enter()
  .append('text')
  .attr('class', 'edgelabel')
  .style('text-anchor', 'middle')
  .attr('id', function (d, i) {
    return 'edgelabel' + i;
  })
  .attr('font-size', 10);

edgelabels
  .append('textPath')
  .attr('xlink:href', function (d, i) {
    return '#edgepath' + i;
  })
  .style('cursor', 'pointer')
  .attr('dominant-baseline', 'middle')
  .attr('startOffset', '50%')
  .selectAll('div.textPath')
  .data(function (d, i) {
    return d.label;
  })
  .enter()
  .append('tspan')
  .attr('class', 'edgelabels')
  .text(function (d, i) {
    return console.log(d), d;
  })
  .attr('x', function (d, i) {
    if (i > 0) {
      return 0;
    }
  })
  .attr('dy', function (d, i) {
    if (i > 0) {
      return 22;
    }
  })
  .attr('dx', 0);

Has anybody else had this issue, can you see anything wrong? Is there anything else I could try to get a consistent dx attribute for each set of labels? Could I restructure the code to get a better result?

from Aligning x position of tspan in IE11 using d3.js