Javascript 如何使D3树链接文本平滑过渡？

可视化目标：构建一个D3树，该树在节点和链接处都有文本，并且在选择/取消选择节点时清晰地过渡

问题：虽然我可以让链接文本（称为谓词）沿着所有链接路径的质心显示，但我似乎无法让它们平滑地进出

问题：有人能帮我清理一下代码，更好地理解树链接转换的行为，让我理解代码背后的理论吗

可视化和源位置：

现有代码如下所示

var linkTextItems = vis.selectAll("g.linkText")
    .data(tree.links(nodes), function(d) { return d.target.id; })

var linkTextEnter = linkTextItems.enter().append("svg:g")
    .attr("class", "linkText")
    .attr("transform", function(d) { return "translate(" + (d.target.y + 20) + "," + (getCenterX(d)) + ")"; });

// Add Predicate text to each link path
linkTextEnter.append("svg:foreignObject")
    .attr("width", "120")
    .attr("height", "40")
  .append("xhtml:body")
    .attr("xmlns", "http://www.w3.org/1999/xhtml")
    .html(function(d){ return "<p>" + (linksByIdHash[d.source.id + ":" + d.target.id].predicate) + "</p>"; });

// Transition nodes to their new position.
//var linkTextUpdate = linkTextItems.transition()
    //.duration(duration)
    //.attr("transform", function(d) { return "translate(" + d.source.x + "," + d.source.y + ")"; })

//linkTextUpdate.select("linkText")
    //.style("fill-opacity", 1);

// Transition exiting linkText to the new position of the parents.
var linkTextExit = linkTextItems.exit().transition()
    .duration(duration)
    .attr("transform", function(d) { return "translate(" + d.source.y + 20 + "," + (getCenterX(d)) + ")"; })
  .remove();

linkTextExit.select("linkText")
    .style("fill-opacity", 1e-6);

function getCenterX(d) {
    var xS = d.source.x;
    var xT = d.target.x;
    if(xS == xT)
      { return (xS - (xS - xT)/2); }
    else if(xS > xT)
      {return (xS - (xS - xT)/2); }
else
  { return (xT - (xT - xS)/2); }
    }

一些症状

当链接文本移入或移出时，会出现起伏/不平滑 分支折叠时，链接文本不会过渡到适当的路径质心 我的挫败感是，我觉得自己很接近，但我错过了一些非常简单/基本的东西。非常感谢您的帮助