Блог

У меня есть дерево 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();
  

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