Добавьте метки в центр пути дерева d3

Question

У меня есть дерево d3 (v5) и я добавил метки к каждому пути. Все методы для центрирования метки на пути включают использование комбинации деления, вычитания x и y между родителем и потомком. Этот подход не может найти истинный центр пути, когда узлы перемещены, перенастроены и т.д. по диагонали. Есть ли подход, чтобы использовать путь, а не координаты родителя / ребенка, чтобы найти центр?

// Update the links...
var link = svg.selectAll('g.link')
  .data(links, function(d) {
  return d.id;
});

// Enter any new links at the parent's previous position.
var linkEnter = link.enter().insert('g', 'g')
  .attr("class", "link")
  .attr("stroke-width", function(d){
    return d.data.toParentStrokeWidth;
  })
.attr("stroke", function(d){
return '#868aa8';//added for future variable color
})

linkEnter.append('path')
  .attr('d', function(d) {var o = {x: source.x0, y: source.y0}; return diagonal(o, o)});

linkEnter.append("foreignObject")
.attr("width", "40")
.attr("height", "40")
.append('xhtml').html(function(d) {
  return '<div class="treeLabel">' + d.data.name + '</div>'
})

// UPDATE
var linkUpdate = linkEnter.merge(link);

// Transition back to the parent element position
linkUpdate.select('path').transition()
  .duration(duration)
  .attr('d', function(d) {
    return diagonal(d, d.parent)
  });

linkUpdate.select('foreignObject').transition()
  .duration(duration)
  .attr('transform', function(d){
    if (d.parent) {
      return 'translate(' + ((d.parent.y + d.y) / 2) + ',' + ((d.parent.x + d.x) / 2) + ')'
    }
  })

// Remove any exiting links
link.exit().each(function(d) {
  d.parent.index = 0;
})

var linkExit = link.exit()
  .transition()
  .duration(duration);

linkExit.select('path')
  .attr('d', function(d) {var o = {x: source.x, y: source.y}; return diagonal(o, o)})

linkExit.select('text')
  .style('opacity', 0);

linkExit.remove();

ОБНОВЛЕНИЕ Изменено для исправления проблемы класса